React中修改二维数组时整行单元格变色问题求助

问题根源 #

你代码里的new Array(STAGE_WIDTH).fill([0, 1])是核心问题——fill方法会把同一个数组对象填充到新数组的每个位置上。也就是说，每一行里的所有单元格其实都是引用的同一个[0,1]对象，所以你修改stageCells[0][0].color时，所有行的第0个元素都会跟着变，因为它们指向的是同一个内存地址的对象。

修复代码 #

把创建单元格数组的方式改成用map来生成每个独立的单元格对象，确保每个单元格都是全新的引用：

const STAGE_WIDTH = 12;
const STAGE_HEIGHT = 20;

// 用map替代fill，每个单元格都是独立的对象
const stageCells = Array.from(Array(STAGE_HEIGHT), () =>
  Array.from({ length: STAGE_WIDTH }, () => ({ value: 0, type: 1 }))
);

stageCells[0][0].color = "blue";
console.log(stageCells);

return (
  <StageGrid>
    {stageCells.map((cells, rowIndex) => cells.map((cell, colIndex) =>
      <Cell key={`${rowIndex}-${colIndex}`} color={cell.color} />
    ))}
  </StageGrid>
)

额外优化 #

• 把原来的[0,1]改成对象形式（比如{value:0, type:1}），比数组更直观，后续扩展属性也更方便
• 单元格的key建议用行索引-列索引的组合，避免同一列不同行的key重复，符合React的key规范

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