javascript - ReactJS 状态未更新在 setState 回调中

Question

我目前正在构建一个 SIP 电话，其中当前调用由 SipPhone 类处理，并使用 React 显示在前端。 SipPhone 有一个调用列表，这些调用会触发 React 组件正在监听的回调。

主要电话组件的初始状态包含一个空的 Immutable List :

constructor(props) {
    super(props);
    ...
    this.state = {
        calls: List(),
    };
}

每当 SipPhone 更新时，此 calls 列表通过由回调触发的事件更新。

handleUpdate = ({ calls }) => {
    const nextCalls = List(calls.map(call => {
      return new Call({ ... }) // Call is an Immutable Record
    });

    console.log(nextCalls.toJS()); // This prints the new list I want to save
    this.setState({ calls: nextCalls }, () => {
        console.log(this.state.calls.toJS()); // The list is empty here
    });
}

有时它会成功更新 calls 列表，而有时 calls 不会改变。当我在设置状态之前记录列表时，它应该是这样，但是当登录 setState 回调时，它与之前的状态保持不变。有时有效，有时无效。

为了进一步测试这一点，我添加了一个状态变量 tick，每次我在此处设置状态时它都会递增。这种变化准确地反射(reflect)在回调中，而调用列表保持不变。

我似乎无法弄清楚为什么它会这样做。实际上，我使用普通数组而不是不可变列表开始这个项目，并遇到了同样的问题。我使用 React 已经有一段时间了，从来没有遇到过这个问题……有什么想法吗？

Answer 1

事实证明，我的代码中的另一个函数在某些情况下会在调用 componentWillUpdate 之前设置状态，导致它忽略对 setState 的初始调用。这就是错误的根源。