[英]How to use setState() in React to blank/clear the value of an array
我正在尝试清除数组,但遇到了麻烦。 this.setState({warnErrorTypes:[]})
我不确定我是否正在处理竞争条件,或者具体问题是什么,但我可以看到我的数组的值在我需要将其值重置为 [] 的情况下始终是错误的。
如何将包含 [1,2] 的数组替换为 [] 然后是 [3] ,其中满足以下条件:
this.setState({warnErrorTypes:[]})
上面逻辑的结果总是[2,1,3]
,而我希望它是[3]
。
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()
将“覆盖”同名键值更新。
选项 3,如 Anders Ekdahl 所述:
moo () {
this.setState(state => ({
myarr: []
}));
// ...
if (weShouldAddAThree) {
this.setState(state => ({
myarr: [ ...state.myarr, 3 ] // like push but without mutation
}));
}
}
如果您在执行状态更新时需要参考先前存在的状态,则此模式很有用。 我不确定您是否真的需要示例中的先前状态,但我会像您一样解释这种模式。
我们提供给setState
的合并操作总是异步应用,在未来的某个时候, 由 React 自行决定。 当setState()
函数返回时,我们的操作还没有被应用,它只是在排队。
因此,我们永远不应该在我们的状态更新器中使用this.state
,因为它可能已经过时了:状态的旧副本。 如果我们需要知道之前的状态,我们应该在传递给 setState 的函数中接收state
参数,并使用它。
您也可以使用它来清除数组而不使用 setState:
this.state.your_array.length = 0;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.