使用Redux实现撤销/重做功能时，克隆对象为何跟随原对象同步更新？

你遇到的是典型的浅拷贝只复制引用不复制深层对象导致的问题：

• Object.assign() 属于浅拷贝方法，仅会复制对象的第一层属性：如果属性值是基本类型（数字、字符串、布尔值等），会直接复制值；如果属性值是引用类型（对象、数组等），只会复制该引用类型的内存地址，不会递归复制内部的属性。
• 你代码里的btn对象的style属性本身就是一个对象，浅拷贝得到的copy对象的style和原btn的style指向的是内存中完全相同的对象，后续你修改btn.style.backgroundColor本质是修改了这个共享对象的属性，copy.style读取到的自然是修改后的值。

你需要对style属性单独做一层拷贝，修改拷贝逻辑即可：

setButtonBackgroundColor: (state, action) => {
  const btn = state.list.present.find(
    (btn) => btn.id === action.payload.id
  );
  // 对style也做一层浅拷贝，切断引用关联
  let copy = {
    ...btn,
    style: { ...btn.style }
  };
  state.list.past = [...state.list.past, copy];
  btn.style.backgroundColor = action.payload.backgroundColor;
}

如果你的style属性里还有更深层级的嵌套对象，需要根据嵌套层级对应做更深的拷贝，结构复杂的场景也可以直接使用成熟的深拷贝工具方法处理。

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