在 React 中直接对 state 的嵌套数组或对象进行浅拷贝（如用展开运算符 [...arr]）无法切断引用关系，导致修改副本时意外影响原始 state；正确做法是使用 map + 展开语法 对每个对象做深拷贝。
在 react 中直接对 state 的嵌套数组或对象进行浅拷贝（如用展开运算符 `[...arr]`）无法切断引用关系，导致修改副本时意外影响原始 state；正确做法是使用 `map + 展开语法` 对每个对象做深拷贝。
这是 React 开发中一个高频且隐蔽的陷阱：看似安全的“拷贝”，实则仍是引用共享。
你当前的代码：
let mappingConfig = [...formData.mappedColumns]; // ❌ 浅拷贝数组，但内部对象仍为原引用 var mIndex = mappingConfig.findIndex(p => p.target == targetIndex); mappingConfig[mIndex].source = 'source'; // ⚠️ 直接修改了原对象！ mappingConfig[mIndex].transformationValue = 'value';
虽然 [...formData.mappedColumns] 创建了一个新数组，但它只是对原数组中每个对象的引用进行了复制——即 mappingConfig[0] === formData.mappedColumns[0] 为 true。因此后续对 mappingConfig[mIndex].source 的赋值，本质上是在修改 formData.mappedColumns[0] 这个原始对象，违反了 React 的不可变性原则，导致状态“意外同步”，UI 无法正确响应或出现难以调试的副作用。
✅ 正确解法：对嵌套对象也执行浅层结构拷贝（shallow clone）
// ✅ 深拷贝数组 + 每个对象的浅拷贝（适用于一层嵌套）
let mappingConfig = formData.mappedColumns.map(obj => ({ ...obj }));
// 现在可安全修改
var mIndex = mappingConfig.findIndex(p => p.target == targetIndex);
if (mIndex !== -1) {
mappingConfig[mIndex] = {
...mappingConfig[mIndex],
source: 'source',
transformationValue: 'value'
};
}
// 最后通过 setState 更新 state（关键！）
setFormData(prev => ({
...prev,
mappedColumns: mappingConfig
}));? 更推荐的写法（函数式更新 + 原地映射）：
setFormData(prev => ({
...prev,
mappedColumns: prev.mappedColumns.map((col, index) =>
col.target == targetIndex
? { ...col, source: 'source', transformationValue: 'value' }
: col
)
}));? 注意事项：
-
...obj只能实现对象第一层属性的浅拷贝；若mappedColumns中的对象还有嵌套对象（如{ config: { type: 'text' } }），需进一步递归拷贝或使用structuredClone（现代浏览器支持）或第三方库（如lodash.cloneDeep）； - 永远避免直接修改 state 或其子属性（如
state.arr[0].prop = x）； - 使用
setState是触发重新渲染的唯一可靠方式，仅修改本地变量不会更新 UI。
总结：React 的 state 更新必须基于不可变数据模式。数组展开 [...arr] ≠ 对象解构 {...obj} —— 前者只复制引用，后者才生成新对象。理解并践行这一点，是写出健壮、可维护 React 应用的基础。
