对 setState 的工作方式感到困惑答案

【问题标题】：Confusion with how setState works对 setState 的工作方式感到困惑
【发布时间】：2021-11-11 14:42:10
【问题描述】：

我对 setState 的工作方式感到困惑。

这是我的代码的一部分：

handleBarsChange(value) {
  this.setState({numberOfbars: value});
  this.resetArray();
}

显然，当resetArray() 函数执行并尝试访问this.state.numberOfbars 状态变量时，setState 尚未更新该值。

我想解释一下 setState 应该如何以及在哪里执行，我什么时候可以看到变化。

谢谢！

【问题讨论】：

我什么时候可以看到变化 - 通常是下一次渲染。然而，在setState 类中，您可以传递一个回调，该回调将在状态更新后执行。所以你可以做this.setState({...}, this.resetArray())
你试过在这个网站上搜索“setState asynchronous”吗？关于这个话题已经有很多个问题了。
请不要给我反应文档链接 - 这不是一个真正有用的态度......如果文档是你需要指出的地方，你应该对他们开放 - reactjs.org/docs/react-component.html#setstate

【解决方案1】：

setState 是异步的。它有第二个回调参数，可用于在状态转换后运行代码。这并不总是最好的方法，但提供的例子非常狭窄，很难说。

this.setState({numberOfBars: value}, () => { this.resetArray() })

来自反应文档：

setState() 的第二个参数是一个可选的回调函数，一旦 setState 完成并重新渲染组件，就会执行该回调函数。通常我们建议使用 componentDidUpdate() 来代替此类逻辑。

【讨论】：

【解决方案2】：

事实上，setState() 函数是异步的，所以即使你在调用它之后运行代码，某些状态可能还没有更新。

解决方法是在状态更新成功时实现回调（setState(<state>, <callback>)），例如：

handleBarsChange(value){
    this.setState({numberOfbars: value}, () => {
        this.resetArray();
    });
}

【讨论】：