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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试清除数组，但是遇到了麻烦。 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推入Array。

[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()“如果您不等待它们首先绑定，则将彼此覆盖。

以上是 如何在React中使用setState（）来清空/清除数组的值 的全部内容， 来源链接： utcz.com/qa/432862.html

回到顶部