在组件状态下从arrays中移除元素

我正试图find在组件状态下从数组中移除元素的最佳方法。 由于我不应该直接修改this.statevariables，是否有更好的方法（更简洁）从数组中删除元素比我在这里？

  onRemovePerson: function(index) { var newData = this.state.data.slice(); //copy array newData.splice(index, 1); //remove element this.setState({data: newData}); //update state }, 

谢谢。

Answer 1

你可以使用来自react-addons-update的update()不变性帮助器 ，它有效地做了同样的事情，但是你在做什么是好的。

 this.setState({ data: update(this.state.data, {$splice: [[index, 1]]}) }) 

Answer 2

做到这一点，我见过的最干净的方法是filter ：

 removeItem(index) { this.setState({ data: this.state.data.filter((_, i) => i !== index) }); } 

Answer 3

我相信引用setState()内的this.state不鼓励https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

文档推荐使用带有callback函数的setState() ，以便在发生更新时在运行时传入prevState。 所以这就是它的样子：

使用不带ES6的Array.prototype.filter

 removeItem : function(index) { this.setState(function(prevState){ return { data : prevState.data.filter(function(val, i) { return i !== index; })}; }); } 

使用带有ES6箭头函数的Array.prototype.filter

 removeItem(index) { this.setState((prevState) => ({ data: prevState.data.filter((_, i) => i !== index) })); } 

使用不变性帮手

 import update from 'immutability-helper' ... removeItem(index) { this.setState((prevState) => ({ data: update(prevState.data, {$splice: [[index, 1]]}) })) } 

使用传播

 function removeItem(index) { this.setState((prevState) => ({ data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)] })) } 

请注意，在每个实例中，无论使用this.setState()技术， this.setState()都会传递一个callback，而不是引用旧的this.state ;

Answer 4

这里是使用ES6扩展语法在状态中从数组中删除元素的一种方法。

 onRemovePerson: (index) => { const data = this.state.data; this.setState({ data: [...data.slice(0,index), ...data.slice(index+1)] }); } 

Answer 5

正如在上面ephrion的回答中所提到的那样，filter（）可能会很慢，特别是对于大数组，因为它会循环查找已经确定的索引。 这是一个干净但低效的解决scheme。

作为替代，可以简单地“分割”所需的元素并连接片段。

  var dummayArray = []; this.setState({data:dummyArray.concat(this.state.data.slice(0,index),this.state.data.slice(index))}) 

希望这可以帮助！

Answer 6

你可以使用这个函数，如果你想删除元素（没有索引）

 removeItem(item) { this.setState(prevState => { data: prevState.data.filter(i => i !== item) }); } 

Answer 7

我正在使用这个，希望它没有问题和帮助。

  removeItem(item){ const index = this.state.yourArray.indexOf(item); if (index < 0 ) return this.state.yourArray.splice(index, 1) this.setState({yourArray: this.state.yourArray}) } 

Answer 8

这是一个简单的方法来做到这一点：

 removeFunction(key){ const data = {...this.state.data}; //Duplicate state. delete data[key]; //remove Item form stateCopy. this.setState({data}); //Set state as the modify one. } 

希望能帮助到你！！！