如何不更新 React 中的状态！！

如果这取决于之前的值，你们如何更新状态？

简单的！！

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter( counter + 1 );
}

...

如果你做的和上面一样，那你就做错了！！😮

但我的代码与上述语法完美兼容！！😟

是的，有时有效，有时无效。

为什么？🤔

由于 React 异步调度状态更新，它不会立即执行。因此，如果你的代码包含多个状态更新，你可能会依赖一些过时或错误的值。

这是 React 团队关于此问题的官方声明

this.props并且this.state可能会异步更新，您不应该依赖它们的值来计算下一个状态。

嗯，那么解决方案是什么？

开始了...

为了处理这种情况，React 允许我们在 setState 中传递一个函数，该函数将为我们提供状态的先前值。

在这里，React 向我们保证值始终被正确更新。🤩

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter((prevState) => {
    // some logic 
    return prevState + 1; 
  });
}

...

请在评论中告诉我您是否曾因状态更新而遇到问题？

我希望听到您的反馈。

如果您喜欢这篇文章，请点赞、分享并标记🔖这篇文章！

🏃‍♂️ 让我们联系👇

🕊 Twitter：https://twitter.com/nehal_mahida（推特上见😃）

👨‍💻 Github：https://github.com/NehalMahida

支持🤗

如果您喜欢我的文章，请考虑喝杯咖啡支持我。☕