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

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。


当前回答

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

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

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

其他回答

如果你使用:

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)]);

当使用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 
    })});
}

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

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

过滤方法是修改数组而不触及状态的最佳方法。

它根据条件返回一个新数组。

在你的例子中,过滤器检查条件person。Id !== Id,并根据条件创建一个不包含该项的新数组。

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

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

   setPeople( newPeople);
 };

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

不明智的: 但如果没有任何id,也可以为条件使用项索引。

索引!== itemIndex

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

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