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

Posted 2023-02-15

【中文标题】如何在 React 中使用 setState() 来空白/清除数组的值

【英文标题】：How to use setState() in React to blank/clear the value of an array

【发布时间】：2015-07-11 17:21:57

【问题描述】：

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

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

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

this.state.warnErrorTypes 是一个以 [] 开头的数组 根据条件，将 2 压入 Array 根据条件，将 1 压入 Array。 根据条件，不会将 3 推入数组中 暂停。用户与 UI 交互 阵列空白：this.setState(warnErrorTypes:[]) 根据条件，不会将 2 推入数组 根据条件，不会将 1 推入数组 根据条件，将 3 推入 Array。

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

【问题讨论】：

您能否提供一个示例来显示 JSBin/jsfiddle 中的问题？

gist.github.com/fogonthedowns/d7a1ddb28129c82fad0c

【参考方案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：

您也可以通过取出状态值、运行更新然后重新绑定来做到这一点，而无需构建持久实例变量：

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

【讨论】：

也可以将一个函数传递给setState，它将当前挂起状态作为参数并返回一个新状态。这样可以轻松避免多次调用 setState 破坏彼此的值。

''在状态更新后由 React 调用" :p 谢谢！

【参考方案2】：

Anders Ekdahl 提到的选项 3：

  moo () 
    this.setState(state => (
      myarr: []
    ));

    // ...

    if (weShouldAddAThree) 
      this.setState(state => (
        myarr: [ ...state.myarr, 3 ]   // like push but without mutation
      ));
    
  

如果您在执行状态更新时需要参考以前的现有状态，则此模式很有用。我不确定您是否真的需要示例中的先前状态，但我会像您一样解释这种模式。

我们提供给setState 的合并操作总是异步应用，在将来的某个时间点at React's discretion。当setState()函数返回时，我们的操作还没有被应用，只是被排队了。

因此，我们不应该在状态更新器中使用this.state，因为它可能已经过时：状态的旧副本。如果我们需要知道之前的状态，我们应该在传递给 setState 的函数中接收 state 参数，并使用它。

【参考方案3】：

你也可以使用它来清除数组而不使用 setState：

   this.state.your_array.length = 0;