Javascript 如何使用setState（）来响应空白/清除数组的值

我正在尝试清除阵列，但遇到了问题。

this.setState（{warnErrorTypes:[]}）

我不确定我是否在处理竞争条件，或者具体的问题是什么，但我可以看到，在我需要将数组的值重置为[]的情况下，数组的值始终是错误的

如何将包含[1,2]的数组替换为[]，然后再替换为[3]，其中以下为真：

this.state.warnErrorTypes是一个以[]开头的数组

根据条件，2被推入数组中

根据条件，在数组中推送1

根据条件，数组中不推送3

暂停。用户与用户界面交互

数组为空白：

this.setState（{warnErrorTypes:[]}）

根据条件，数组中不推送2

根据条件，数组中不推送1

根据条件，3被推入数组

---

上面逻辑的结果总是

[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 });
}

getInitialState:function（）{
this.mylist=[]；
返回{
迈尔：这个。我的名单
};
},
...
moo:function（）{
this.mylist=[]；
对于（var i=0；i选项3，如Anders Ekdahl所述：

moo（）{
this.setState（state=>({
迈亚尔：[]
}));
// ...
如果（我们应该添加树）{
this.setState（state=>({
myarr:[…state.myarr，3]//类似于推送，但没有突变
}));
}
}

如果您在执行状态更新时需要引用以前的现有状态，则此模式非常有用。我不确定您在示例中是否确实需要以前的状态，但我将像您那样解释此模式

我们提供给
setState
的合并操作总是在将来的某个时候异步应用。当
setState（）
函数返回时，我们的操作没有应用，它只是排队

因此，我们不应该在状态更新程序中使用
this.state
，因为它可能已经过时：状态的旧副本。如果我们需要知道以前的状态，我们应该在传递给setState的函数中接收
state
参数，并使用它。
您也可以使用它来清除数组，而不使用setState:

   this.state.your_array.length = 0;

您能提供一个示例来说明JSBin/JSFIDLE中的问题吗？还可以将函数传递给
setState
，该函数将当前挂起状态作为参数，并应返回一个新状态。这样可以很容易地避免对
setState
的多次调用相互碰撞值谢谢！
   this.state.your_array.length = 0;