javascript - 如何从状态数组中删除一个项目？

Question

故事是，我应该能够将 Bob、Sally 和 Jack 放入一个盒子中。我也可以从盒子里取出任何一个。移除后，不会留下任何插槽。

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

我现在需要删除“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];
},

...

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

Answer 1

当使用 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 
    })});
}