如何从状态数组中删除项目？

Question

故事是，我应该可以把鲍勃、莎莉和杰克放进一个盒子里。我也可以从盒子中取出任何一个。移除后，不会留下任何插槽。

people = ["Bob", "Sally", "Jack"]

我现在需要删除，比如“Bob”。新数组将是：

["Sally", "Jack"]

这是我的反应组件：

...

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];
},

...

在这里，我向您展示了一个最小的代码，因为它还有更多内容（onClick 等）。关键部分是从数组中删除、移除、销毁“Bob”，但 removePeople() 在调用时不起作用。有任何想法吗？我正在 看这个，但由于我使用的是 React，所以我可能做错了什么。

原文由 Sylar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要从数组中删除元素，只需执行以下操作：

 array.splice(index, 1);

在你的情况下：

 removePeople(e) {
 var array = [...this.state.people]; // make a separate copy of the array
 var index = array.indexOf(e.target.value)
 if (index !== -1) {
 array.splice(index, 1);
 this.setState({people: array});
 }
 },

原文由 MarcoS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 React 时，永远不要直接改变状态。如果一个对象（或者 Array ，它也是一个对象）被改变了，你应该创建一个新的副本。

其他人建议使用 Array.prototype.splice() ，但该方法会改变数组，因此最好不要将 splice() 与 React 一起使用。

最容易使用 Array.prototype.filter() 创建一个新数组：

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

原文由 iaretiga 发布，翻译遵循 CC BY-SA 4.0 许可协议