我目前正在构建一个SIP电话,当前 call 由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)在回调中,而 call 列表保持不变。我似乎无法找出执行此操作的任何原因。我实际上是使用普通数组而不是不可变列表开始该项目的,并且遇到了相同的问题。我已经使用React一段时间了,从未遇到过这个问题...有什么想法吗?
最佳答案
事实证明,我的代码中的另一个功能是在某些情况下,在调用componentWillUpdate之前设置状态,从而导致它忽略了对setState的初始调用。这是错误的根源。