React Reducer处理ADD_TO_CART时quantity属性值异常问题

算力阿峰

2026-8-29

问题根因

这个问题由两个独立问题叠加导致：

两行日志输出不一致是浏览器控制台的延迟求值特性：
直接打印action.payload.cartProduct.quantity时，读取的是代码执行到这一行时的瞬时值，也就是你dispatch时设置的1，结果符合预期。
直接打印对象时，控制台不会立刻序列化对象的所有属性，只会存储对象的引用，你后续在控制台展开这个对象看到的属性值，是展开瞬间对象的最新值，不是执行console.log时的值。
你提到应用实际状态也出现异常，说明日志差异只是表象，核心是reducer的状态更新逻辑存在严重错误。
实际状态异常的核心原因是违反了React状态的不可变更新原则，叠加了错误的数量计算逻辑：
- 你在reducer的ADD_TO_CART分支中，必然存在直接修改对象引用的操作：要么直接修改了action.payload.cartProduct的属性，要么遍历state.cart找到已存在的商品后，直接修改了该商品对象的quantity值，没有创建对象副本。
- 如果你第一次加购时直接把action.payload.cartProduct原对象存入了state.cart（没有做拷贝），这个对象会被state和action同时持有引用，任何一处对该对象的修改会同时反映在两边，这也是为什么你明明在dispatch时给quantity设了1，最后对象上的quantity会变成异常值。
- 你观察到的2倍+2的数量增长规律，是你写的数量计算逻辑本身错误导致的：正常加购同商品应该是已有数量+1，你当前代码里必然写了错误的乘加公式，或者重复执行了多次累加逻辑，再叠加引用共享的问题，导致每次计算都基于上一次被错误篡改的值迭代，出现指数级增长的异常结果。

修复方案

严格遵守不可变更新规则，reducer中禁止直接修改state、action上的任何对象属性，所有更新必须创建新的副本：
正确的ADD_TO_CART逻辑参考如下：

case 'ADD_TO_CART': {
  const addedProduct = action.payload.cartProduct;
  const existingProductIndex = state.cart.findIndex(item => item.id === addedProduct.id);

  // 购物车已存在该商品：返回新数组，更新对应商品的数量副本
  if (existingProductIndex > -1) {
    return {
      ...state,
      cart: state.cart.map((item, idx) => {
        if (idx === existingProductIndex) {
          // 必须返回新对象，禁止直接修改原item
          return {
            ...item,
            quantity: item.quantity + 1 // 替换为你实际需要的数量计算逻辑，删除错误的乘加代码
          }
        }
        return item;
      })
    }
  }

  // 购物车不存在该商品：返回新数组，存入新商品的副本
  return {
    ...state,
    cart: [...state.cart, { ...addedProduct }] // 不要直接存入action中的原对象引用
  }
}

排查现有reducer中ADD_TO_CART分支的数量计算逻辑，删除错误的2倍+2相关计算代码，替换为正确的累加逻辑。
后续调试对象值时，如果需要获取代码执行瞬间的对象快照，不要直接打印原对象，可以打印深拷贝后的结果，比如console.log(structuredClone(action.payload.cartProduct))，避免控制台延迟求值误导判断。

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