如何从状态数组中删除一个项目?

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

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。

当前回答

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

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

2016-03-31 07:25:00

其他回答

一些答案提到了使用“splice”，正如Chance Smith所说的那样，它使数组发生了突变。我建议你使用调用slice的方法 (这里是'slice'的文档)，它会对原始数组进行复制。

2018-07-19 18:45:30

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

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

2016-03-31 07:25:00

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

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

2021-04-06 09:23:33

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获取更多信息

2016-03-31 07:27:31

如果你使用:

const[myArr, setMyArr] = useState([]);

添加:

setMyArr([...myArr, value]);

至于移除:

let index = myArr.indexOf(value);
if(index !== -1)
    setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);

2022-10-29 13:19:24

如何从状态数组中删除一个项目?

推荐文章

最新文章

标签