如何在 React 中安全地從狀態數組中刪除項目？

在React 中從陣列中刪除項目：指南

在React 中，管理狀態對於維護應用程式行為的完整性至關重要使用者體驗。常見場景涉及對狀態數組的操作，例如新增、刪除或更新項目。

要了解如何從狀態數組中刪除項目，讓我們考慮一個簡單的範例：

您想要將三個人的清單：Bob、Sally 和 Jack 儲存在狀態數組中。您需要能夠從清單中刪除它們中的任何一個，並且刪除後，數組不應有任何空槽。

在您的 React 元件中，您可能有以下程式碼：

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

但是，removePeople() 函數的這種實作在呼叫時將無法如預期運作。原因在於 React 處理狀態突變的方式。

永遠不要在 React 中直接突變 State

當更新狀態中的物件或陣列時，必須建立一個新的物件或陣列。複製。直接改變原始狀態物件或陣列可能會導致意外行為和潛在錯誤。

在這種情況下，直接從陣列中刪除元素（這會修改原始狀態物件）不會觸發對狀態物件的更新React 中的狀態。狀態保持不變，UI 不會反映 Bob 從清單中刪除。

使用 Array.prototype.filter() 進行安全刪除

到以與 React 相容的方式從狀態數組中刪除項目，有多種選擇。一個有效的方法是利用 Array.prototype.filter()。

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

此方法使用過濾結果建立一個新數組。在這種情況下，它會過濾掉具有目標值的人員，從而有效地將其從清單中刪除。然後將產生的新陣列設為狀態，觸發必要的 UI 更新以反映項目的刪除。

以上是如何在 React 中安全地從狀態數組中刪除項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！