UseState显示以前的值始终[duplicate]

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：0 AccountID：0

单击的ID：1 AccountId：0

谁能告诉我这种行为背后的原因和如何解决。

Answer 1

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

null

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

Answer 2

来自react文档

React可能会将多个setState（）调用批处理到一个更新中以提高性能。

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

状态更新可能是批处理和异步更新的，因此在调用console.log（）时状态可能没有更新。您将在下一次调用useEffect钩子时得到保证更新的结果。

Answer 3

accountId将不会在此呈现中更新。您必须等待下一次呈现以更新它。只有在调用useState时，AccountId才会填充到函数组件的顶部。你在渲染的中间。如果需要实际值，请不断从e.currenttarget.value中提取它。