Question

我想在React状态内从数组中删除元素而不更改数组长度。像这样使用delete方法是否合适：

removeField = (index) => {
  delete this.state.array[index];
};

如果没有，我该如何处理？我的实际解决方案取决于数组的长度（不确定是否正确）。

Answer 1

如果出于任何原因需要保存array.length：

removeField = (index) => {
  this.setState((prevState) => {
     return {...prevState, array: prevState.array.map((item, id) => id === index ? null : item }
   })
};

Answer 2

我这样做：

    removeField = (index) => {
      let arrCpy = {...this.state.array}
      delete arrCpy[index]
      this.setState({ array: arrCpy )}
    };

首先使用saped运算符创建数组的副本，然后删除副本中的索引，然后将新数组重新设置为状态

Answer 3

这里最简单的解决方案是使用@Halt提到的在状态副本上使用delete方法，但是这可能不是最佳答案，因为它可能导致某些意外行为。最合适的解决方案是array.prototype.splice（）方法-可以将已删除的项目替换为null，但是在我的示例中，它迫使我对子组件添加了附加限制，从而降低了它们的灵活性。

使用delete运算符直接从React状态中删除元素

3 个答案: