React购物车状态异常：修改前后cartItems与updatedCart输出一致

问题描述 #

在React开发的购物车功能中，点击CartItem组件的+/-按钮调用DataContext.js中的addToCart()函数时，将saveCart()替换为console.log分别打印操作前的cartItems和操作后的updatedCart，预期两者内容不同，但控制台输出完全一致。需求是在saveCart()中传入操作前后的两个购物车状态，但始终无法得到预期结果。

购物车对象示例：

[{"id":2,"quantity":6},{"id":3,"quantity":2},{"id":1,"quantity":2}]

问题原因 #

1. 引用类型浅拷贝问题：
   代码中使用updatedCart = [...cartItems]创建数组的浅拷贝，数组本身是新的，但数组内的每个商品对象还是原cartItems中对象的引用。当修改updatedCart[existingItemIndex].quantity时，原cartItems中的对应对象也会被修改，因为两者指向同一个内存地址。
2. 控制台惰性求值特性：
   浏览器控制台打印对象时，不会立即显示对象的快照，而是在你展开对象时才读取其当前状态。所以即使修改了updatedCart，当你在控制台查看时，cartItems已经被间接修改，导致两者显示一致。

解决方案 #

1. 对购物车数组进行深拷贝 #

修改addToCart()中创建updatedCart的方式，确保数组内的对象也是新的引用，避免修改updatedCart时影响原cartItems：

• 方式一：使用map创建每个对象的拷贝

// 替换原updatedCart = [...cartItems];
updatedCart = cartItems.map(item => ({ ...item }));

• 方式二：使用JSON序列化做深拷贝（适合结构简单的对象）

updatedCart = JSON.parse(JSON.stringify(cartItems));

2. 打印对象快照避免惰性求值 #

如果需要在控制台查看打印时刻的真实状态，打印时将对象转为JSON字符串：

if (transactionComplete) {
    console.log('操作前cartItems:', JSON.stringify(cartItems, null, 2));
    console.log('操作后updatedCart:', JSON.stringify(updatedCart, null, 2));
    // saveCart(updatedCart);
}

修改后的addToCart()关键代码示例 #

function addToCart(id, value=1, limit=10) {
    const existingItemIndex = cartItems.findIndex((cartItem) => cartItem.id === id);

    let updatedCart = [];
    let transactionComplete = true;

    if (existingItemIndex !== -1) {
      // 使用map做深拷贝，确保每个对象都是新引用
      updatedCart = cartItems.map(item => ({ ...item }));
      const quantityNow = updatedCart[existingItemIndex].quantity

      if (value >= 0 && quantityNow <= (Math.min((getCorProduct(id).stock || 0), limit) - value)) {
        updatedCart[existingItemIndex].quantity += value;
      }
      else if (value < 0 && quantityNow >= 2) {
        updatedCart[existingItemIndex].quantity += value;
      }
      else {
        transactionComplete = false;
      }
    } else {
      updatedCart = [...cartItems, { id, quantity: Math.min(value, limit) }];
    }

    if (transactionComplete) {
        console.log('操作前cartItems:', JSON.stringify(cartItems, null, 2));
        console.log('操作后updatedCart:', JSON.stringify(updatedCart, null, 2));
        // saveCart(updatedCart);
    }
}

验证效果 #

修改后再次点击+/-按钮，控制台会打印出操作前后的真实状态，两者内容会符合预期的差异。

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