如何在不留间隙的情况下从 React State 中删除项目？

从 React State 中删除项目

问题涉及从 React 状态中的数组中删除项目，例如“Bob”。挑战来自于必须保持数组的完整性而不留下任何空缺。

之前，尝试使用删除突变手动删除 Bob 失败了。相反，建议采用遵循 React 原则的解决方案。

不可变数组操作

React 禁止直接操作状态值。要更改状态内的数组，必须创建一个新副本。

Array.prototype.filter()

最直接的方法是利用 Array.prototype。 filter() 构造一个新数组，省略要删除的项目。例如：

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

此代码通过迭代 this.state.people 中的每个元素来创建一个新数组。如果名称不等于要删除的项目（例如“Bob”），则它将保留在新数组中。

结论

利用filter()确保状态不变性并维护数组的完整性，消除删除留下的任何空槽。

以上是如何在不留间隙的情况下从 React State 中删除项目？的详细内容。更多信息请关注PHP中文网其他相关文章！