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

javascript arrays reactjs

2022-08-30 00:46:09

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

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

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

["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”，但在调用时不起作用。有什么想法吗？我正在研究这个问题，但我可能做错了什么，因为我使用的是 React。removePeople()

答案 1

使用 React 时，你永远不应该直接改变状态。如果对象（或也为对象）发生更改，则应创建一个新副本。Array

其他人建议使用，但这种方法会使 Array 发生变化，因此最好不要与 React 一起使用。Array.prototype.splice()splice()

最容易用于创建新阵列：Array.prototype.filter()

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

答案 2

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

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