如何在 React 中使用 setState() 來清空/清除數組的值

Question

我正在嘗試清除數組，但遇到了麻煩。 this.setState({warnErrorTypes:[]})

我不確定我是否正在處理競爭條件，或者具體問題是什么，但我可以看到我的數組的值在我需要將其值重置為 [] 的情況下始終是錯誤的。

如何將包含 [1,2] 的數組替換為 [] 然后是 [3] ，其中滿足以下條件：

1. this.state.warnErrorTypes 是一個以 [] 開頭的數組
2. 根據條件，2 被推入 Array
3. 根據條件，1 被推入數組。
4. 根據條件，3 不會被推入 Array
5. 暫停。 用戶與 UI 交互
6. 數組被清空： this.setState({warnErrorTypes:[]})
7. 根據條件，2 不會被推入數組
8. 根據條件，1 不會被推入 Array
9. 根據條件，將 3 推入 Array。

上面邏輯的結果總是[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：

您也可以通過取出狀態值，運行更新，然后重新綁定來完成此操作，而無需構建持久性實例變量：

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()將“覆蓋”同名鍵值更新。

Answer 2

選項 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 ，因為它可能已經過時了：狀態的舊副本。 如果我們需要知道之前的狀態，我們應該在傳遞給 setState 的函數中接收state參數，並使用它。

Answer 3

您也可以使用它來清除數組而不使用 setState：

   this.state.your_array.length = 0;