正在从处于组件状态的数组中删除元素

Question

我正在试图找到最好的方法，从处于组件状态的数组中删除元素。既然我不应该直接修改this.state变量，那么有没有比这里更好（更简洁）的方法从数组中删除元素

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

谢谢你。

更新了

这已更新为使用setState中的回调。在更新当前状态时，应在引用当前状态时执行此操作。

Answer 1

我认为不鼓励在setState（）中引用this.state（状态更新可能是异步的）。

文档建议使用带有回调函数的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箭头函数的rray.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.state的对象引用；

Answer 2

您可以使用react-addons-date中的date（）不可变性帮助器，它在引擎盖下有效地做同样的事情，但是您正在做的事情很好。

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

Answer 3

我见过的最干净的方法是使用过滤器：

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