javascript - 如何在 React 中使用 setState() 来清空/清除数组的值

Question

我正在尝试清除数组，但遇到了麻烦。 this.setState({warnErrorTypes:[]})

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

如果满足以下条件，如何将包含 [1,2] 的数组替换为 []，然后再替换为 [3]:

1. this.state.warnErrorTypes 是一个以 [] 开头的数组
2. 根据条件，将2压入Array
3. 根据条件，将 1 压入 Array。
4. 根据条件，3 不被压入数组
5. 暂停。用户与 UI 交互
6. 数组为空白:this.setState({warnErrorTypes:[]})
7. 根据条件，2 未被压入数组
8. 根据条件，不将 1 压入数组
9. 根据条件，将 3 压入数组。

上述逻辑的结果总是[2,1,3]，而我期望它是[3]。

Answer 1

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:

您还可以通过取出状态值、运行更新然后重新绑定(bind)来实现此目的，而无需构建持久性实例变量:

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() 调用将“覆盖”相同的-如果您不等待它们先绑定(bind)，则命名键值会更新。