在setState回调中ReactJS状态未更新

Question

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

电话的主要组件的初始状态包含一个空的不可变列表：

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

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

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，每次在这里设置状态时该变量都会增加。此更改准确地反映在回调中，而呼叫列表保持不变。

我似乎无法找出执行此操作的任何原因。我实际上是使用普通数组而不是不可变列表开始该项目的，并且遇到了相同的问题。我已经使用React很长时间了，从未遇到过这个问题...有什么想法吗？

Answer 1

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