React受控输入框仅显示上一次输入值不展示当前值问题

• React函数组件中useState返回的状态更新方法setChartData不是Promise实例，对其使用await不会产生阻塞等待状态更新完成的效果。React的状态更新是内部批量调度执行的，当前函数执行上下文里捕获的chartData是当前渲染轮次的闭包旧值，不会在set方法调用后立刻变更，在set之后立刻打印拿到的永远是旧值。
• 给事件处理函数加async关键字后，React 17及更早版本会在同步执行流程结束后回收复用合成事件对象，异步时序里访问事件对象属性会拿到被重置后的异常值，直接导致取值慢一拍，和你描述的「输入h无显示、输入hi只显示h」的表现完全吻合。
• 直接展开当前闭包内的chartData做更新属于典型的闭包陷阱，连续快速输入时很容易拿到过时的旧状态，造成更新覆盖。

• 移除事件处理函数上不必要的async、await，在同步执行阶段提前取出事件对象上需要的属性，避免事件池回收导致的取值异常。
• 涉及基于前序状态更新的场景，使用函数式更新写法，从更新函数的参数中拿到最新的前序状态，规避闭包旧值问题。
• 状态更新完成后需要执行的逻辑（比如打印最新值、触发后续计算），放到useEffect中监听对应状态变化执行，不要直接写在set方法调用后。

修复后的代码参考：

const handleChange = (e) => {
  // 同步阶段缓存事件对象属性，避免事件池影响
  const { name, value } = e.target;
  // 函数式更新，确保每次拿到的都是最新的前序状态
  setChartData(prev => ({ ...prev, [name]: value }));
}

// 状态更新后执行的逻辑放到useEffect里
useEffect(() => {
  console.log(chartData);
  // 其他依赖最新chartData的逻辑写在这里
}, [chartData])

补充说明：如果事件处理里确实需要调用异步接口，可以先把事件对象上需要的值提前缓存到局部变量，再写异步逻辑，不要在异步回调里直接访问e.target的属性。

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