React钩子的奇怪行为：数据更新延迟

  • Z时代
  • 2024-01-10
  • 分类：问答

奇怪的行为：我希望第一和第二个console.log显示不同的结果，但是它们显示相同的结果，并且仅在下次单击时更改该值。我应该如何编辑代码，以使值有所不同？

function App() {
  const [count, setCount] = React.useState(false);
  const test = () => {
    console.log(count); //false
    setCount(!count);
    console.log(count); //false
  };
  return (
    <div className="App">
      <h1 onClick={test}>Hello StackOverflow</h1>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

您可以在这里看到一个有效的示例：https :

//codesandbox.io/s/wz9y5lqyzk

回答：

状态更新是异步的，因此如果您使用的是Hooks，则可以useEffect在更新后收到通知。

这是一个例子：

https://codesandbox.io/s/wxy342m6l

如果您使用的是React组件的setState，则可以使用回调

this.setState((state) => ({count: !state.count}), () =>

console.log('Updated', this.state.count));

如果需要状态值，请记住使用回调来更新状态。

以上是 React钩子的奇怪行为：数据更新延迟 的全部内容， 来源链接： utcz.com/qa/431005.html

回到顶部