如何解决React钩子的奇怪行为:数据更新延迟
状态更新是异步的,因此如果您使用的是Hooks,则可以useEffect
在更新后收到通知。
这是一个例子:
https://codesandbox.io/s/wxy342m6l
如果您使用的是React组件的setState,则可以使用回调
this.setState((state) => ({count: !state.count}), () =>
console.log('Updated', this.state.count));
如果需要状态值,请记住使用回调来更新状态。
解决方法
奇怪的行为:我希望第一和第二个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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。