如何在保持不变性的同时从 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中文网其他相关文章！