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

React：從狀態數組中刪除項目

在 React 中，有效維護資料至關重要。在狀態中使用陣列時，保持不變性至關重要。直接修改陣列可能會導致意外行為。

挑戰

想像一個場景，其中個體「Bob」、「Sally」和「Jack」儲存在一個狀態數組「人」。目標是從陣列中刪除一個人，例如“Bob”，而不留下空槽。

不正確的解決方案

提出的removePeople()方法嘗試透過將所需索引處的陣列元素設為未定義來刪除項目。然而，這種方法直接改變狀態，違反了 React 的不變性原則。

React 方式

要適當地從狀態數組中刪除項目，請避免直接更改它。相反，使用修改後的內容建立一個新陣列：

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() 來救援

Array.prototype.filter() 是一個強大的工具根據指定條件建立新數組。在本例中，它用於從原始“people”數組中排除目標人員。

不變性是關鍵

React 嚴重依賴不可變資料結構。保持不變性可確保資料一致性、避免意外的狀態突變並簡化偵錯。透過建立陣列的新實例（如 filter() 方法所示），您可以在 React 開發中保留這項關鍵原則。

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