为什么在异步函数中没有更新react-hooks值？

IT技术 javascript reactjs react-hooks
2021-04-30 17:45:07

运行run函数时，我希望value变量的值为“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))
}
3个回答

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

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

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

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

希望能帮助到你。随意怀疑

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

  • 我认为setState应该使用新值重新渲染组件，如果您在某处显示它，它将立即显示。因此，如果您想立即看到更改，请添加显示。
  • 当您在setState之后立即控制台登录run函数时，组件尚未重新渲染，这意味着您仍在查看旧值。
  • 当组件重新渲染时，您看不到控制台记录的值，因为没有再次调用run函数。单击该按钮两次应该控制台记录新值，因为此时组件已使用该新值重新呈现。
其它你可能感兴趣的问题
上一篇如何将 React 应用程序部署到 Heroku 下一篇react-native中的 event.target.value