setState
被聚合和调度,它不会运行原子和立即,所以你不能只发出多个 setState() 调用并期望事情正常工作,你要么必须等待状态更新再更新它,或者使用实例多变的。
选项1:
moo: function() {
this.setState({
myarr: []
}, function() { // called by React after the state is updated
this.setState({
myarr: [3]
});
});
}
这是相当麻烦的,取决于你在做什么,主要是糟糕的代码。另一种选择是使用“真实”实例变量,您可以在需要时将其作为状态发送。
选项 2:
getInitialState: function() {
this.mylist = [];
return {
myarr: this.mylist
};
},
...
moo: function() {
this.mylist = [];
for(var i=0; i<10; i++) {
this.mylist.push(i);
}
this.setState({ myarr: this.mylist });
}
请记住,更新状态意味着您更改了组件的一个方面,需要重新渲染,因此如果您不打算重新渲染组件,请不要使用 setState,例如在清除数组和重新填充数组之间。单独做这些事情,只有在完成后才更新状态。
选项 3:
您也可以通过取出状态值,运行更新,然后重新绑定来完成此操作,而无需构建持久性实例变量:
moo: function() {
var list = this.state.myarr;
while(list.length > 0) { list.splice(0,1); }
for(var i=0; i<10; i++) { list.push(i); }
this.setState({ myarr: list });
}
最终效果是一样的:只有在数据处于某种稳定配置时才更新 UI,所以如果您认为setState()
在渲染之间调用了多次,那就是一个问题:每次setState()
调用都可能“最终”触发渲染,并且setState()
如果您不等待它们先绑定,那么在此之前的连续调用将“覆盖”同名键值更新。