为什么异步函数中没有更新反应钩子值?

Question

运行运行函数时，我希望值变量具有"new"值，但即使 500 毫秒，它仍然保持"旧"。为什么会发生这种情况以及如何解决这个问题？

import React, { Component, useState } from "react";
import { render } from "react-dom";
function App() {
const [value, setValue] = useState('old');
const run = async() => {
setValue('new')
const data = await wait(500)
console.log(value)
}
return (
<button onClick={run}>
Run
</button>
);
}
render(<App />, document.getElementById("root"));
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

Answer 1

setState 异步运行，因此它不会立即反映在函数代码块中。您可以尝试使用 useEffect 来观察状态的变化。

useEffect(() => console.log('value', value), [value])

Answer 2

在您的情况下const [value, setValue] = useState('old');setValue 与类组件中的 setState 完全相同。因此，由于 setState 和 setValue 是异步函数，因此您永远无法预测值何时更新。

因此，您可以在类组件中使用componentDidUpdate，也可以像useEffect(() => callFn();, [value])这样的useEffect。 所以这里callFn()是一个函数，将在值更新后调用。

希望对您有所帮助。 随意怀疑

Answer 3

好的，这是我认为正在发生的事情： 单击按钮，该按钮将调用您的运行函数 - 然后运行函数调用setState。

• 我认为setState应该导致组件的重新渲染 使用新值，如果您在某处显示它，它将立即显示。因此，如果您想立即看到更改，请添加显示。
• 当您在setState之后立即控制台登录运行函数时，组件尚未重新呈现，这意味着您仍在查看旧值。
• 当组件重新呈现时，您看不到控制台记录的值，因为尚未再次调用run函数。单击该按钮两次应控制台记录新值，因为此时组件已使用该新值重新呈现。