React父/子组件在数据不相关时同步数据

Question

我遇到了一个问题，不相关的数组似乎取了相同的值。。这是我的代码示例和问题描述，如果有人能帮忙，请https://codesandbox.io/s/aged-frost-thwsfz?file=/src/App.js

我的问题：

• 2个组件。1列出练习并用mui模态打开另一个组件
• 我在模态中进行更新(编辑文本字段，从表中删除一个条目(
• 如果我关闭模态(在模态外部单击(，模态将关闭，并且文本框中填充的值将反映在父组件中
• 排序和删除确实会更新子模态组件中的表，但如果我关闭，排序和删除不会反映在父组件中(这是我所期望和想要的(。。如果我单击X或关闭组件而不单击保存，我实际上是在取消更新
• 为什么值传播到父组件

在现实生活中：

• 我有一个react钩子形式，模式是编辑值
• 我甚至有SortableJs可以对列表进行排序
• 代码有点乱，因为我在数组上尝试了spread运算符，甚至lodash克隆，以确保父级和子级有不同的数组副本，但没有，字段仍然会更新

Answer 1

_。clone((函数创建给定对象的浅层副本。嵌套的对象或数组将使用引用进行复制，而不是重复。

在handleExercisetimeUpdate函数中，直接使用新值更新引用值。。

const handleExerciseTimeValueUpdate = (itemId, value) => {
let copy = _.clone(editExercisesList);
// let entry = copy.find((e) => e.id === itemId);
// entry.time = value; -> which directly updates the reference.
// Instead
let entry = copy.map((e) => (e.id === itemId ? { ...e, time: value } : e));
setEditExercisesList(entry);
};