Javascript 如何在状态中正确地从数组中添加和删除特定项？

我正在尝试实现一些功能，允许在组件状态下将复选框的名称推送到数组中，并在复选框未选中时删除该名称。我可以很好地推送到数组中，它正在从数组中删除我遇到问题的项

我曾尝试使用splice，但我遇到的问题是，阵列似乎落后于一个操作，因此无法拼接出正确的项目

handleCheckboxChange = event => {
  if (event.target.checked) {
    this.setState({
      check: [...this.state.check, event.target.name]
    });
} else if (!event.target.checked) {
    let index = this.state.check.indexOf(event.target.name);
    this.setState({
      check: this.state.check.splice(index, 1)
    });
  }
};

预期结果是，当用户选中或取消选中相应的复选框时，将从数组中添加或删除项。

根据，它将返回已删除的项

包含已删除元素的数组。如果只删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组

所以当你这样做的时候：

   this.setState({
      check: this.state.check.splice(index, 1)
    });

您基本上是直接修改

this.state.check

，方法是在其上使用拼接，然后使用

this.setState（{check:[已删除项]}）

对其进行设置

您不应直接修改状态变量，而应执行以下操作：

this.setState({
     check: this.state.check.filter((item, i) => {
          return index !== i;
     })
})

---

filter

创建一个新数组，不修改当前数组。您也可以使用

slice

，它使用数组的浅拷贝，但我认为这更具可读性。

一个简单的解决方案是

.filter

您还应该注意，

.splice

正在改变数组，这意味着您正在用.splice改变state对象，然后用setState（）改变state，这意味着您要改变它两次。我相信您希望避免突变，只使用setState（）进行更改

尝试此解决方案（添加了一些有关格式的意见）：

编辑：西班牙人和我在同一时间发布了相同的解决方案，但由于实现略有不同，我将把它留在这里。

请记住，setState（）是异步的。它很可能会像你预期的那样发生，只是不会在你预期的时间范围内发生。

handleCheckboxChange = event => {
  const {checked, name} = event.target
  if (checked) {
    this.setState({
      check: [...this.state.check, name]
    });
} else {
    this.setState({
      check: this.state.check.filter(item => item !== name)
    });
  }
};