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