Javascript 我有两个状态，但都在更新，即使我只设置了其中一个状态

问题

使用React，我吃了一顿饭，里面有一系列的配料

const[fine，setfine]=useState（）

我还需要编辑成分名称，因此我有一个不同的状态来跟踪它。我在这个问题上使用了扩展运算符

[ChangeComponents，setChangeComponents]=useState（）

//在单独的useffect中

设置更改配料（[…膳食配料]）

当我更新
ChangeComponents
时，问题就开始了

  handleEdit = (e) => {
    let temp = [...changeIngredients];
    temp[e.positionOfArray].name = Number(e.target.value);
    setChangeIngredients(temp);
  };

我发现，
膳食.配料
也在更新，因此无法进行比较以查看是否有任何变化

我以前尝试过在API调用的response.data中使用SetChangeComponents，但结果是一样的

setmine（response.data）


setChangeComponents（[…response.data.components]）


任何建议都将受到欢迎，这是因为你在同一个对象上发生了变异，这
设置了ChangeComponents（[…mean.components]）
里面的每个对象仍然指向相同的
成分参考

const sourceArray = meal.ingredients;
const clonedArray = sourceArray.map(item => ({...item}));
setChangeIngredients(clonedArray)

基本上，您需要首先在您的初始
设置更改配料

const sourceArray = meal.ingredients;
const clonedArray = sourceArray.map(item => ({...item}));
setChangeIngredients(clonedArray)

如前所述，有关不可变的更多信息，请查看此处，spread运算符只生成浅拷贝。它只克隆了主对象。。。属性的副本仍将通过引用传递。
Hi here:）您能否在
codesandbox
上生成一个工作示例？请尝试以下操作：
SetChangeComponents（prevState=>（{…prevState，…temp}））
更感兴趣查看您的UseEffects谢谢所有人的帮助。易周的回答是解决方案。我没有考虑到阵列中有更多的对象需要克隆。非常感谢！这正是问题所在。我一直试图在不同的变量上使用spread，但没有考虑到数组中也充满了对象。