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

IT技术 javascript reactjs setstate
2021-04-29 16:10:43

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

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

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

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

上面逻辑的结果总是[2,1,3]在我期望的时候[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在我们的状态更新器中使用,因为它可能已经过时了:状态的旧副本。如果我们需要知道之前的状态,我们应该state在传递给 setState 的函数中接收参数,并使用它。

您也可以使用它来清除数组而不使用 setState:

   this.state.your_array.length = 0;