MUI Autocomplete条件赋值后值无法立即更新问题求助

我在给MUI Autocomplete添加可创建选项时，遇到了一个问题：在组件的onChange回调里调用handleOnChange时，无法获取到刚通过setValue更新后的新值——因为React的setState是异步的。尝试过用useEffect监听值变化，但事件对象（event）无法在onChange代码块外使用，所以想直接在onChange内拿到更新后的值。

原代码如下：

const [value, setValue] = React.useState(null);

return (
  <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          if (typeof newValue === "string") {
            setValue({
              title: newValue,
            });
          } else if (newValue && newValue.inputValue) {
            // Create a new value from the user input
            setValue({
              title: newValue.inputValue,
            });
          } else {
            setValue(newValue);
          }
          handleOnChange(event, value); // 问题：这里的value是旧值，不是更新后的值
        }}
      />
);

解决方法 #

不用等待setValue异步更新完成，而是提前计算好要设置的最终新值，直接用这个计算后的变量同时执行setValue和调用handleOnChange：

修改后的代码：

const [value, setValue] = React.useState(null);

return (
  <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          let finalNewValue;
          // 先根据规则计算出最终要设置的新值
          if (typeof newValue === "string") {
            finalNewValue = { title: newValue };
          } else if (newValue && newValue.inputValue) {
            finalNewValue = { title: newValue.inputValue };
          } else {
            finalNewValue = newValue;
          }
          // 用计算好的新值更新state
          setValue(finalNewValue);
          // 直接把这个新值传给handleOnChange，无需等待state更新
          handleOnChange(event, finalNewValue);
        }}
      />
);

这样一来，handleOnChange就能拿到和setValue完全一致的最新值，完美避开setState异步特性带来的问题，也不需要额外使用useEffect来处理事件对象的存储问题。

内容的提问来源于stack exchange，提问作者prajeesh