Question

我想做什么

我想创建一个切换功能，允许用户通过将它们添加到数组（我的状态对象）来单击或关闭复选框，或者如果它们已经存在，则将它们从数组中删除。 / p>

我期待发生什么

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

   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
      })

    }

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

实际发生的事情

当拼接激活时，它会删除之前点击的元素，而不是我当前点击的元素。

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

编辑：在下面解决了！

以下是与工作示例的链接：https://repl.it/@yoursweater/MemorableJitteryAustraliancurlew

Answer 1

Array.splice()删除数组中的元素并返回已删除的元素。由于您指定了tempState = tempState.splice(tempIndex, 1)，tempState现在包含已删除的元素。您可以将该行重写为tempState.splice(tempIndex, 1)来修复它（无需重新分配tempState）。

也可以使用a = b.slice()

复制数组，而不是进行JSON解析/字符串化。

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];

使用拼接

2 个答案: