ReactJS中如何根据二维数组索引删除对应整行？

二维数组示例 #

0:0 {value: 123}
0:1 {value: 124}
0:2 {value: 124}

1:0 {value: 120}
1:1 {value: 121}
1:2 {value: 124}

2:0 {value: 123}
2:1 {value: 121}
2:2 {value: 124}

触发删除的交互代码：

<div onClick={()=>onRemoveVariation(0, 2)}>Remove</div>

现有代码 #

const onRemoveVariation = (index1, index2) => {
    setVariants(
      variants.map((data, i) => {
        data.map((d, ix) => {
          if (i === index1 && ix === index2) {
            //Delete the entire row
          }
          return d;
        })
        return data;
      })
    );
  }

我之前用filter处理过一维数组，但不清楚怎么在二维数组里应用。现在想实现：当外层数组索引index1和内层元素索引index2匹配时，删除对应的整行，该怎么修改代码？

要删除指定的整行（外层数组中索引为index1的那一行），根本不需要遍历内层数组——直接在外层用filter就能搞定，因为你要删的是整行，和内层的index2没啥关系（除非你还有额外验证逻辑）。

改完的代码是这样：

const onRemoveVariation = (index1) => {
    setVariants(prevVariants => prevVariants.filter((_, i) => i !== index1));
};

关键点说明： #

• filter是处理“删除/筛选”场景的最佳选择，它会返回一个新数组，包含所有符合条件的元素——这里我们保留所有索引不等于index1的行，自然就删掉了目标行。
• 用函数式更新（prevVariants）是React的最佳实践，能确保你拿到的是最新的状态值，避免闭包导致的状态不一致问题。
• 如果你的index2参数是用来验证该行是否存在对应内层元素的，可以加个判断逻辑：

const onRemoveVariation = (index1, index2) => {
    setVariants(prevVariants => 
        prevVariants.filter((row, i) => {
            // 只有当目标行存在，且内层索引有效时才删除该行（可选）
            if (i === index1 && row[index2] !== undefined) {
                return false;
            }
            return true;
        })
    );
};

你原来用map的思路走偏了——map是用来转换数组元素的，不是用来删除的，而且你只是遍历了内层数组但没做任何修改，所以根本不会改变原数组结构。

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