React状态异常：更新newPlanogram时machinePlanogram同步变更问题

核心原因：JavaScript对象的引用类型特性 #

这一异常行为完全由JavaScript中对象的引用传递机制导致，具体分为两个关键环节：

1. 状态初始化时的引用共享
   在数据获取函数findPlanogram中，你从数据库拿到pdata[0]这个对象后，直接将它同时赋值给machinePlanogram和newPlanogram：

let x = pdata[0]
setNewPlanogram(x)
setMachinePlanogram(x)

由于对象是引用类型，x只是指向该对象内存地址的指针。此时machinePlanogram和newPlanogram两个状态变量，实际上指向的是同一个内存中的对象实例，而非两个独立的副本。

2. 状态更新时的直接修改
   在更新函数updatePlanogramProduct和updatePlanogramQuantity中：

function updatePlanogramProduct (event, index) {
  let y = newPlanogram
  y.planogram.shelves[index].productCode = event.target.value
  setNewPlanogram(y)
}

let y = newPlanogram并没有创建新对象，只是让y也指向newPlanogram当前引用的那个共享对象。之后你直接修改y的属性，本质上是在修改那个被两个状态共同引用的原对象。即使调用setNewPlanogram(y)触发重新渲染，machinePlanogram引用的还是同一个对象，所以它的内容会同步发生变化。

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