从数组中使用splice删除项目遇到困难

Question

我想做什么

我希望创建一个开关功能，允许用户通过将复选框添加到数组（我的 state 对象）或如果它们已经存在，则从数组中删除它们。

我期望发生的事情

使用以下代码，如果复选框不在所选数组中，则应将其添加。如果它已经存在，则删除它：

   if (this.state.selected.indexOf(rowNumber) == -1) {

      let tempState = this.state.selected
      tempState.push(rowNumber)

      this.setState({
        selected: tempState
      })

    } else if (this.state.selected.indexOf(rowNumber) > -1 ){

      let tempIndex = this.state.selected.indexOf(rowNumber)
      let tempState = JSON.parse(JSON.stringify(this.state.selected))
      tempState = tempState.splice(tempIndex, 1)

      this.setState({
        selected: tempState
      })

    }

我的状态对象是一个简单的数组。

实际发生的情况

当splice激活时，它会移除先前点击的元素而不是我当前正在点击的元素。

我想知道为什么它不只是选择/取消选择当前点击的复选框。谢谢！

编辑：在下面已解决！

这里是具有工作示例的链接：https://repl.it/@yoursweater/MemorableJitteryAustraliancurlew

- yoursweater

---

请提供一个“最小化、完整性和可验证性示例”（Minimal, Complete, and Verifiable example）。详见链接：https://stackoverflow.com/help/mcve - Ele

顺便提一下，tempState.push(rowNumber) 不行，因为你直接修改了状态。 - Giorgi Moniava

Yup Giorgi，谢谢。我刚注意到你评论之前。我现在也在对它进行JSON.parse/stringify操作。 - yoursweater

Answer 1

Array.splice() 方法会就地移除数组中的元素，并返回被移除的元素。由于你将 tempState = tempState.splice(tempIndex, 1) 赋值，因此 tempState 现在包含了被移除的元素。你可以将该行重写为 tempState.splice(tempIndex, 1) 以修复它（不重新分配 tempState）。

另外，你可以使用 a = b.slice() 复制数组代替执行 JSON 解析/序列化。

- ctring

---

啊，不确定我怎么会错过那个！谢谢！！ - yoursweater

Answer 2

我可以建议一种不同的方法吗？在JavaScript中，数组可以处理设置非连续索引，因此您可以像这样从空数组开始：

const state = [];

...然后做类似这样的事情：

state[3] = true;

...然后你会得到一个看起来像这样的数组：

[undefined, undefined, undefined, true];

你也可以访问越界的索引，它会被视为未定义。

if (state[5]) {
  console.log('You won\'t see this.');
}
else {
  console.log('You will see this.');
}

由于JavaScript数组的工作方式，您可以通过以下方式简单地存储和切换按钮状态：

state[rowNumber] = !state[rowNumber];

- kshetline