从多维数组中删除匹配的字符串项

Question

我有一个从复选框值派生的多维数组，对于外部数组的所有实例，它们可以具有相同的字符串。

示例数组：

[
    ['One', 'Two', 'Three'],
    ['One', 'Two', 'Three'],
    ['One', 'Two', 'Three'],
]

当我调用该函数时，我传递了一个索引号，该索引号表示我要处理的内部数组之一。 例如，如果用户在 1 索引中取消选中表示“二”的复选框，我希望多维数组更改为此。

 [
        ['One', 'Two', 'Three'],
        ['One', 'Three'],
        ['One', 'Two', 'Three'],
 ]

我在编写这个函数时遇到了麻烦。 这是在 React 中，解决这个问题的代码片段目前是这样的：

setCheckedValues(prevArray => {
          const newItemArray = prevArray.slice()
          const newItemArrayFiltered = [...newItemArray, newItemArray[index].filter(name => name !== event.target.name)]
          return newItemArrayFiltered
        })

我已经进行了很多搜索，并且对如何仅在一个内部数组中删除字符串感到困惑。 感谢您的帮助！

Answer 1

处理这个问题的一个相当标准的方法是在索引周围slice() 。

setCheckedValues(prevArray => {
  return [
    ...prevArray.slice(0, index),
    prevArray[index].filter(name => name !== event.target.name),
    ...prevArray.slice(index + 1)
  ];
});

另一种方法是在数组上使用map()检查匹配的索引并适当地返回更新的值。

setCheckedValues(prevArray => prevArray
  .map((arr, i) =>
    i === index
      ? arr.filter(name => name !== event.target.name)
      : arr
  )
);