故事是这样的,我应该可以把鲍勃,莎莉和杰克放进一个盒子里。我也可以把它们从盒子里拿出来。拆卸时,没有插槽留下。

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()在调用时不工作。什么好主意吗?我正在看这个,但我可能做错了,因为我使用React。


当前回答

这里几乎所有的答案似乎都是类组件,这里有一个代码,在一个功能组件中为我工作。

const [arr,setArr]=useState([]);
const removeElement=(id)=>{
    var index = arr.indexOf(id)
    if(index!==-1){
      setArr(oldArray=>oldArray.splice(index, 1));
    }
}

其他回答

删除具有特定值的元素 // 注意过滤器函数总是返回一个新数组。

const people = ["Bob", "Sally", "Jack"]
    
const removeEntry = (remove) => {
const upDatePeople = people.filter((Person) =>{
return Person !== remove
});
console.log(upDatePeople)
//Output: [ 'Sally', 'Jack' ]
}
removeEntry("Bob");

你忘记使用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
  })
},

但最好使用过滤器,因为它不会改变数组。 例子:

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

这里是亚历山大彼得罗夫使用ES6的回应的一个小变化

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

当使用React时,你不应该直接改变状态。如果一个对象(或者数组,这也是一个对象)被改变了,你应该创建一个新的副本。

其他人建议使用Array.prototype.splice(),但该方法会使Array发生变异,因此最好不要在React中使用splice()。

最简单的使用array .prototype.filter()来创建一个新数组:

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

使用.splice从数组中删除项。使用delete,数组的索引不会被改变,但特定索引的值将是未定义的

splice()方法通过删除现有元素和/或添加新元素来更改数组的内容。

语法:数组。splice(start, deleteCount[, item1[, item2[,…]]])

var people = ["Bob", "Sally", "Jack"] var toRemove = 'Bob'; var index = people.indexOf(toRemove); if (index > -1){//确保item存在于数组中,如果没有if条件,-n个索引将被考虑从数组的末尾开始。 人。拼接(指数(1); } console.log(人);

编辑:

正如justin-grant指出的,作为经验法则,永远不要改变这个。直接调用setState(),因为之后调用setState()可能会替换您所做的突变。对待这个问题。状态,仿佛它是不可变的。

另一种方法是,在其中创建对象的副本。状态和操作副本,使用setState()将它们赋值回去。数组#映射,数组#过滤器等可以使用。

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