javascript - 如何根据字符串匹配id从数组中删除字符串

Question

我目前正在渲染一个复选框，如果选中，则数据（字符串中的 id）保存在 state 中。但是，我正在尝试将功能组合在一起，如果未选中复选框，则需要从状态中删除数据（这是一个字符串数组）。

我想出了这个解决方案，但是我认为我没有正确使用 .splice，或者如果这是我使用的最佳选择，因为它不起作用。

<Checkbox
        onChange={(e) => {
          e.target.checked
            ? setSelectedStyles([...selectedStyles, s.id])
            : e.target.checked === false &&
              selectedStyles.map((id) => id === s.id)
            ? selectedStyles.splice(s.id)
            : console.log(`didn't work`)
        }}
      ></Checkbox>

澄清一下，selectedStyles是存储在 state 中的字符串数组。s.id是我正在检查的 id（字符串）。

有人对如何解决这个问题有任何想法吗？

提前致谢

Answer 1

尝试这个：

onChange={(e) => {
  e.target.checked
  ? setSelectedStyles([...selectedStyles, s.id])
  : setSelectedStyles(selectedStyles.filter(x => x !== s.id))
}}

该filter方法允许在删除所需项目的同时克隆数组。

你永远不应该像你试图做的那样改变 React 状态splice。