React中如何实现setState同步执行？多输入表单事件处理问题

你的问题核心是没搞清楚React useState的更新机制——setState本身就是异步批量更新的，而且它不返回Promise，所以用async/await根本没法让它同步执行。你当前的写法还存在闭包陷阱：当快速输入时，values捕获的是当前渲染周期的旧值，可能导致状态更新不及时。

直接改用函数式更新就能解决问题，让每次状态修改都基于最新的状态值：

const [values, setValues] = useState({
  username: undefined,
  password: undefined,
  confirmPassword: undefined,
});

const onChange = (e) => {
  // 传入函数，基于上一次的状态生成新状态
  setValues(prevValues => ({
    ...prevValues,
    [e.target.name]: e.target.value
  }));
}

为什么这样有效？ #

函数式更新会让React把你的更新请求加入队列，每次更新都取上一次的最终状态作为参数，不管触发多少次输入，状态都会正确累积，彻底避免闭包捕获旧值的问题。

如果需要在状态更新完成后执行某些逻辑，别用async/await，而是用useEffect监听values的变化：

useEffect(() => {
  // 每次values更新后自动执行这里的代码
  console.log('最新表单值:', values);
}, [values]);

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