React父子组件非关联数据同步异常问题求助

核心原因 #

你遇到的问题本质是浅拷贝导致的引用共享：

• 用展开运算符[...exercises]或lodash.clone拷贝数组时，属于浅拷贝——数组本身是新的，但数组内的每个exercise对象仍和原数组对象指向同一块内存地址。
• 子组件修改文本框时，是直接修改了对象的text属性（比如exercise.text = 新值），这个操作会直接作用于原对象，所以父组件的数组会同步变化。
• 而排序、删除操作是修改数组结构（比如生成新数组、splice删除元素），子组件的数组是新的引用，父组件原数组不受影响，符合预期。

解决方法 #

要彻底隔离父子组件数据，需对数组做深拷贝，确保每个exercise对象都是全新引用，以下是几种可行方式：

1. 用JSON.parse(JSON.stringify())（简单场景适用） #

在父组件打开模态框时，传递深拷贝后的数组：

const handleOpen = (exercises) => {
  const deepCopiedExercises = JSON.parse(JSON.stringify(exercises));
  setModalExercises(deepCopiedExercises);
  setOpen(true);
};

注意：该方法不适合包含函数、Symbol等特殊类型的对象，但对你的exercise对象（仅含普通字符串/数字属性）完全适用。

2. 用lodash.cloneDeep（推荐，更健壮） #

若项目已引入lodash，直接使用深拷贝方法：

import cloneDeep from 'lodash/cloneDeep';

// 父组件传递数据时
const deepCopiedExercises = cloneDeep(exercises);

3. 手动遍历创建新对象（无需依赖库） #

自行遍历数组，为每个对象创建副本：

const deepCopiedExercises = exercises.map(exercise => ({
  ...exercise,
  // 若对象有嵌套属性，需继续展开拷贝
}));

验证修改 #

完成深拷贝后，子组件修改文本框内容只会作用于拷贝后的新对象，父组件原数组不会被影响，关闭模态框后父组件数据保持不变，符合需求。

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