为何await useState更新函数后，打印的仍是旧状态？

核心原因有两个： #

• useState的更新函数不返回Promise
  你用await去等待setEnteredUsername完全是无效操作——这个更新函数本身是同步执行的，它不会返回Promise对象，await对它起不到任何“等待状态更新完成”的作用。

• React状态更新是异步批量处理的
  在React的合成事件（比如input的onChange）回调里，状态更新会被React批量推迟处理，不会在调用setter后立刻修改状态变量。你当前usernameChangeHandler函数里的enteredUsername，是函数创建时捕获的闭包值，在这个函数执行的整个周期里，这个值都不会改变，所以console.log打出来的自然还是旧的状态。

要获取更新后的状态可以这么做： #

• 如果只是想在状态更新后执行逻辑，用useEffect监听状态变化：

  useEffect(() => {
    console.log(enteredUsername, enteredAge);
  }, [enteredUsername]);
  

• 如果需要基于前一个状态计算新状态，用函数式更新（此时能在回调里拿到最新的前状态）：

  setEnteredUsername(prevUsername => {
    const newUsername = event.target.value;
    console.log(newUsername); // 这里能直接拿到新状态值
    return newUsername;
  });
  

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