React state异常：未调用setProduct时父级product状态莫名被修改

• 本质是JavaScript引用类型的浅拷贝陷阱导致的状态意外污染：
  你在AdminProductTools中初始化variants状态时，直接传入了来自上层product状态的product.variants数组。虽然你在更新variants时做了数组的浅拷贝[..._variants]，但数组内存储的每个variant对象仍然和上层product.variants中的对象共享同一个内存引用。当你修改newVariants[index].action时，实际上是直接修改了原始对象的属性，上层的product状态的内部内容自然也被同步修改。
• 两个诡异现象的具体逻辑：
  1. 未调用setProduct但product prop看起来更新：你点击按钮时调用了setVariants，会触发AdminProductTools组件重渲染。重渲染时拿到的product还是原来的对象引用，但该对象内部的variants属性内容已经被你直接修改，因此JSON.stringify(product)输出的就是修改后的内容，看起来像是prop被更新了，实际是同一个对象的内部属性被篡改。
  2. DevTools显示product更新但上层UI无变化：React DevTools会直接读取状态对象的当前值，你修改了对象内部属性后会被DevTools检测到并显示更新。但React组件触发重渲染的前提是调用对应状态的setter方法，你没有调用setProduct，React感知不到product状态的变化，因此不会触发上层Product组件的重渲染，对应位置的UI自然不会更新。

更新variants时，对要修改的variant对象做深一层的拷贝，避免修改原始引用：

function toggleRemove(index) {
  setVariants((_variants) => {
    return _variants.map((variant, i) => {
      if (i !== index) return variant;
      // 创建全新的variant对象，不修改原引用
      return {
        ...variant,
        action: variant.action === "remove" ? undefined : "remove"
      }
    })
  });
}

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