调用 setState 后状态保持不变，即使在 setState 的回调中答案

【问题标题】：State remains the same after calling setState, even in the callback of setState调用 setState 后状态保持不变，即使在 setState 的回调中
【发布时间】：2020-08-19 09:41:35
【问题描述】：

我正面临与setState 相关的奇怪错误。我知道它是异步的，因此我在setState的callback函数中添加了console.log(this.state)，但是状态保持不变，并且没有任何变化反映在app上。这是代码：

  if (response && response.data && response.data.data) {
    if (this._isMounted) {
      const arrangedSenderEmailAddresses = arrangeEmailAddresses(response.data.data);
      console.log('update data: ', arrangedSenderEmailAddresses);
      this.setState({ emailAddresses: arrangedSenderEmailAddresses }, () => {
        console.log('state after update: ', this.state.emailAddresses);
      });
    }
  }

response 是从后端检索的对象。

console.log('update data: ', arrangedSenderEmailAddresses) 显示应该在状态上设置的新数据，但在回调中：

console.log('state after update: ', this.state.emailAddresses); 显示旧状态。

有人遇到过这样的bug吗？

【问题讨论】：

标签： reactjs debugging callback updates setstate

【解决方案1】：

即使在回调中，它也会使用之前的状态值，因为您将 this.state 传递到控制台日志，在该回调中不会重新评估它，但会获得旧状态。

来自React docs：

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

【讨论】：