UseState始终显示以前的值

Question

这是所有新的react开发人员中的一个热门问题，但不知何故，我无法理解可用解决方案背后的逻辑。我尝试使用钩子更新状态变量，并尝试读取更新后的值，但它总是返回以前的值，而不是新值。下面是我的代码执行顺序。

onClick={setTransactionAccountId}

单击按钮时，它执行以下代码并更新状态，但console.log显示旧值。

const [accountId, setAccountId] = useState(0);
const setTransactionAccountId = e => {
console.log("Clicked ID:", e.currentTarget.value);
setAccountId(e.currentTarget.value);
console.log("accountId:", accountId);
};

控制台日志：

1. 单击第一个按钮：

已单击ID:0accountId:0

2. 第二个按钮点击：

已单击ID:1accountId:0

有人能告诉我这种行为背后的原因以及如何应对吗？

Answer 1

accountId不会在本次渲染中更新。您必须等待下一个渲染才能更新它。accountId仅在调用useState时填充在函数组件的顶部。您正处于渲染的中间。如果您需要实际值，请继续将其从e.currentTarget.value中取出。

Answer 2

来自react文档

React可能会将多个setState((调用批处理到一个更新中表演

因为this.ops和this.state可能是异步更新的不应该依赖于它们的值来计算下一个状态。

状态更新可能是异步批处理和更新的，因此在调用console.log((时状态可能尚未更新。您将在下次调用useEffect钩子时获得保证更新的结果。

Answer 3

这是因为setState是异步的。在状态更新之前执行console.log('accountId:', accountId)仍然会为您提供以前的状态值。如果您添加了async/await，那么应该可以解决这个问题。

const setTransactionAccountId = async (e) => {
console.log('Clicked ID:', e.currentTarget.value)
await setAccountId(e.currentTarget.value)
console.log('accountId:', accountId)
}