使用concat处理Redux状态仍会引发状态突变问题

你遇到的问题核心是浅拷贝的局限性：concat()、slice()或者扩展运算符[...cart]都只能做数组的浅拷贝——数组本身是新的，但数组里的对象元素还是和原Redux状态里的对象共享同一个引用。所以你修改copyCart[0].name时，本质上是直接修改了原Redux状态中的对象，这就违反了Redux"不可直接修改状态"的规则，后续dispatch时就会触发状态突变错误。

正确的解决方案 #

方案1：针对单个对象做浅拷贝（适用于对象无嵌套属性的情况） #

通过map遍历数组，对需要修改的元素创建新的对象副本，其他元素保持原样：

const cartHandler = () => {
  const copyCart = cart.map((item, idx) => {
    // 只修改目标位置的对象，返回新对象
    if (idx === 0) {
      return { ...item, name: "New Name" };
    }
    // 其他元素直接返回（无需拷贝，因为没修改它们）
    return item;
  });
  setDisplayCart(copyCart);
};

方案2：深拷贝整个数组（适用于对象有嵌套属性的情况） #

如果你的购物车对象里还有嵌套的子对象，需要使用深拷贝来完全切断与原状态的引用。可以用原生的structuredClone方法：

const cartHandler = () => {
  // 深拷贝整个cart数组及内部所有对象
  const copyCart = structuredClone(cart);
  copyCart[0].name = "New Name";
  setDisplayCart(copyCart);
};

为什么这些方法有效？ #

• 方案1中，map生成了新数组，修改的元素是通过{...item}创建的新对象，完全独立于原Redux状态中的对象。
• 方案2的structuredClone会递归复制所有层级的对象，生成一个完全独立的副本，修改副本不会影响原状态。

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