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);
};

控制台日志：

第一个按钮单击：

点击的ID：0 accountId：0

第二个按钮单击：

点击的ID：1 accountId：0

有人可以告诉我这种行为的原因以及如何解决它。

Answer 1

accountId尚未更新此渲染器。您必须等待下一个渲染进行更新。 accountId仅在调用useState时填充在功能组件的顶部。您位于渲染的中间。如果您需要实际值，请继续将其从e.currentTarget.value中拉出。

Answer 2

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

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

Answer 3

来自react docs

React可以将多个setState（）调用批处理为单个更新，以用于性能。

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

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

UseState始终显示先前的值

3 个答案: