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

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

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 [items, setItems] = useState(data);
const removeItem = (index) => {
  setItems([
             ...items.slice(0, index),
             ...items.slice(index + 1)
           ]);
}

2021-10-06 01:51:27

其他回答

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

2016-03-31 07:27:37

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

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

2016-12-25 23:47:36

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => { person.id !== id;
     setPeople( newPeople );
     
   });
 };

<button onClick={() => handleRemove(id)}>Remove</button>

2020-12-15 05:31:53

从react的状态数组中删除项目的简单方法:

当任何数据从数据库中删除和更新列表时，没有调用API，你将删除id传递给这个函数，这个函数从列表中删除已删除的记录

导出默认类PostList扩展组件这一点。状态= { postList:( ｛ id: 1、名称:“所有项目”， },{ id: 2 名称:“库存物品”，｝ ), ｝ remove_post_on_list = (deletePostId) => { this.setState ({ postList: this.state.postList。过滤(item => item。= deletePostId) }) ｝｝

2019-03-22 07:51:51

如果你使用:

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

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

推荐文章

最新文章

标签