如何在保持不變性的同時從 React 狀態的陣列中刪除項目？

在 React 中從陣列狀態中刪除項目

在 React 中，管理狀態對於維護元件的內部資料至關重要。在處理狀態數組時，保持不變性對於避免常見陷阱至關重要。

考慮從狀態陣列中刪除項目的場景。常見的方法是使用 Array.prototype.delete() 來變更原始數組，如問題所示：

removePeople(e) {
  var array = this.state.people;
  var index = array.indexOf(e.target.value);
  delete array[index];
}

但是，在 React 中，建議避免直接改變狀態。相反，建立包含所需變更的陣列的新副本：

removePeople(e) {
  this.setState({people: this.state.people.filter(function(person) {
    return person !== e.target.value;
  })});
}

此方法利用Array.prototype.filter() 方法建立一個新數組，其中包含要刪除的元素之外的所有元素。它不會改變原始數組，從而確保狀態的不變性。

透過採用這種方法，您可以保持狀態完整性並避免與 React 中的狀態突變相關的潛在問題。

以上是如何在保持不變性的同時從 React 狀態的陣列中刪除項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！