如何在 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中文网其他相关文章！