React中点击复选框向两个数组添加值时第二个数组被覆盖如何解决

问题原因 #

• 每次触发点击事件时，你都在函数内部声明了let params = []，等于每次操作都会清空之前的params数据，自然只能保留最后一次勾选的条目。
• 取消勾选的逻辑中只处理了checked数组的删除操作，没有同步删除params数组对应位置的条目，后续操作会出现两个数组索引不匹配的问题。
• 你没有将修改后的newParams同步更新到持久化存储（如state、全局变量），即使修改了值也不会生效。

修复方案 #

你需要和读取books_numbers一样，从存储位置读取已有的params数组，不要每次新建空数组，同时同步两个数组的增删操作。

以React useState场景为例，修复后代码如下：

// 提前声明两个数组的存储，也可以是全局变量等其他存储方式
const [booksNumbers, setBooksNumbers] = useState([])
const [paramsList, setParamsList] = useState([])

const handleToggle = (value) => () => {
  // 读取当前已有的两个数组的值
  const checked = booksNumbers
  const currentParams = paramsList

  const currentIndex = checked.indexOf(value.value)

  const newChecked = [...checked]
  const newParams = [...currentParams]

  if (currentIndex === -1) {
    // 勾选时同步添加对应值
    newChecked.push(value.value)
    newParams.push(value.params)
  } else {
    // 取消勾选时同步删除对应索引的条目
    newChecked.splice(currentIndex, 1)
    newParams.splice(currentIndex, 1)
  }

  // 同步更新两个数组的存储
  setBooksNumbers(newChecked)
  setParamsList(newParams)
}

如果是使用全局变量存储的场景，只需要将最后的state更新逻辑改为给全局变量赋值即可，注意不要在函数内部局部声明同名的params变量覆盖全局值。

内容的提问来源于stack exchange，提问作者Kiraahmad