从状态数组中删除项目

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

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

我现在需要删除“鲍勃”。新的数组将是：

["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()在调用时不起作用。有任何想法吗？我一直在看这个，但由于使用React，所以我可能做错了。

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

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

使用React时，切勿直接改变状态。如果Array更改了一个对象（或，它也是一个对象），则应创建一个新副本。

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

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

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

这是亚历山大·彼得罗夫（Alexandre Petrov）使用ES6的响应的一个小变化

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

用于.splice从数组中删除项目。使用delete，数组的索引不会更改，但特定索引的值将是undefined

的拼接（）方法改变阵列的通过去除现有元件和/或添加新元素的内容。

句法： array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

编辑：

正如justin-grant所指出的那样，根据经验，切勿this.state直接进行变异，因为setState()事后致电可能会取代您所做的变异。对待this.state就好像它是不可变的。

替代方法是，在其中创建对象this.state的副本并操作这些副本，然后使用分配它们setState()。Array#map，Array#filter等等，也可以被使用。

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

从状态数组中删除项目的简单方法反应：

当任何数据从数据库和更新列表中删除而没有API调用时，您将delete id传递给此函数，并且此函数从列表中删除已删除的记录

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

提到了一些使用“剪接”的答案，正如Chance Smith所说的那样，对阵列进行了突变。我建议您使用方法调用“ slice” （此处为“ slice”的文档）来复制原始数组。

首先定义一个值非常简单

state = {
  checked_Array: []
}

现在，

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

您忘记了使用setState。例：

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

但是最好使用filter它，因为它不会使数组变异。例：

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

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

Redfer doc了解更多信息