使用React Hooks时如何仅修改二维数组状态的单个单元格

核心规则 #

React 状态更新采用不可变模式，不能直接修改原状态的引用，需要生成新的数组对象触发组件重渲染。整个修改过程无需手动重写所有单元格内容，只要沿着修改路径做浅拷贝即可。

操作步骤 #

针对你定义的二维数组状态，修改单个单元格的流程：

• 基于上一次的状态值生成新的外层数组，非目标行直接沿用原数组引用，不做任何改动
• 仅对匹配到的目标行做浅拷贝，替换该行中目标列的单元格值，该行其余位置的值完全沿用原内容

举个实际修改场景：需要将第1行（数组索引1）的选中状态从true改为false，实现代码如下：

// 定义待修改的目标位置和新值
const targetRowIndex = 1;
const targetColIndex = 1;
const newValue = false;

setFootballersList(prevList => {
  // 遍历生成新的外层数组，非目标行直接返回原行数据
  return prevList.map((row, currentRowIndex) => {
    if (currentRowIndex !== targetRowIndex) return row;
    // 命中目标行，拷贝该行的子数组，仅替换目标列的值
    const updatedRow = [...row];
    updatedRow[targetColIndex] = newValue;
    return updatedRow;
  })
})

上述写法中，未改动的行数据完全保留原有引用，不需要手动重写["1",true]、["3",true]这类固定内容，仅生成目标行的新数组对象即可。

简化写法（ES2022+ 环境支持） #

如果项目兼容最新JS语法，可以用数组原生不可变方法with简化逻辑，不需要手动编写拷贝流程：

setFootballersList(prevList => 
  prevList.with(targetRowIndex, prevList[targetRowIndex].with(targetColIndex, newValue))
)

with方法会返回一个指定位置替换为新值的全新数组，适配这类单元格修改的场景。

避坑提示 #

• 禁止直接通过下标修改原状态，例如footballersList[1][1] = false这类写法会直接改动原状态引用，React无法检测到状态变化，页面不会触发更新
• 不需要对整个二维数组做全量深拷贝，只需要沿着修改路径做浅拷贝即可，避免不必要的性能损耗

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