如何在React中使用setState（）来清空清除数组的值

如何在React中使用setState（）来清空/清除数组的值

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()

“如果您不等待它们首先绑定，则将彼此覆盖。