React/JavaScript：如何在forEach循环中通过select独立更新多维数组子数组？

问题根源 #

你遇到的问题核心是数组引用共享：如果初始化多维数组时，两个子数组指向同一个内存地址的数组，修改其中一个子数组时，另一个会同步变化——因为它们本质是同一个数组的不同引用。

解决方案 #

1. 初始化时创建独立的子数组 #

避免用fill()直接填充同一个数组（比如Array(2).fill([{value: 0}])），这种写法会让所有子数组共享同一引用。改用以下方式生成独立子数组：

// 方法1：用Array.from创建独立副本
const initialArr = Array.from({ length: 2 }, () => [{ value: 1 }]);

// 方法2：手动创建每个子数组的副本
const baseItem = [{ value: 1 }];
const initialArr = [[...baseItem], [...baseItem]];

2. 更新时保持数组不可变性 #

修改子数组时，不要直接修改原数组，而是创建新的数组副本，确保每个更新操作都返回全新的数组结构（尤其在React这类框架中，这是触发重新渲染的关键）。示例处理函数：

const handleSelectChange = (subArrayIndex, newValue) => {
  // 基于原数组创建新副本
  const newArr = [...yourArr];
  // 针对目标子数组，创建它的副本并修改元素
  newArr[subArrayIndex] = newArr[subArrayIndex].map(item => 
    // 根据需求修改子数组元素，这里以替换value为例
    {...item, value: newValue}
  );
  // 更新状态（React中用setState）
  setYourArr(newArr);
};

如果是给子数组添加新元素，写法类似：

newArr[subArrayIndex] = [...newArr[subArrayIndex], { value: newValue }];

关键原理 #

数组属于引用类型，只有当子数组是独立的内存对象时，修改操作才不会互相干扰。通过创建副本（扩展运算符...、slice()、Array.from()），可以确保每个子数组拥有自己的内存空间，实现独立更新。

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