React电商购物车商品数量增减功能失效排查求助

结算页空白的核心原因是reducer破坏了state结构，同时存在语法/逻辑错误，导致组件无法正确读取购物车数据，以下是具体问题和修复方案：

1. INCREASE_PRODUCT 逻辑与结构错误 #

原代码存在两个致命问题：

• 匹配条件错误：dispatch传递的是action.basket对象，但reducer里用item.id === action.id匹配（action中无id字段），导致永远找不到目标商品。
• 返回结构错误：修改后的商品被嵌套在basket字段中，破坏了购物车数组的元素结构，后续组件读取item.quantity会失败。

修复代码：

case 'INCREASE_PRODUCT': 
  const tempIncrease = state.basket.map((item) => {
    if(item.id === action.basket.id){ // 匹配action中basket的id
      return {...item, quantity: item.quantity + 1} // 直接返回修改后的商品对象
    } else {
      return item 
    }
  })
  return {...state, basket: tempIncrease} // 保持state结构，仅更新basket字段

2. DECREASE_PRODUCT 拼写与结构错误 #

原代码问题：

• 类型名拼写错误：case里写的是'DEACREASE_PRODCUCT'，但dispatch用的是'DECREASE_PRODUCT'，导致该case永远不会触发。
• 返回值直接返回数组，破坏了state的原始结构（应该是包含basket的对象）。

修复代码：

case 'DECREASE_PRODUCT': // 修正拼写错误
  const tempDecrease = (state.basket || []).map((item) => { // 处理basket为空的边界情况
    if(item.id === action.basket.id){
      return {...item, quantity: item.quantity - 1}
    } else {
      return item
    }
  })
  return {...state, basket: tempDecrease} // 保持state结构完整

3. Reducer 核心规则：保持state结构一致 #

所有reducer的case必须返回与初始state结构完全一致的对象。你的初始state应该是类似{ basket: [] }的结构，因此任何修改都要通过{...state, basket: 修改后的数组}返回，不能直接返回数组——否则state会变成纯数组，后续组件读取state.basket时会得到undefined，直接导致页面空白。

4. 商品列表页避免修改原始数据 #

原代码直接item.quantity = 1修改源数据，会导致意外的渲染问题，应该创建新对象：

<div className="product">
  {products?.length > 0 &&
    products?.map((item) => {
      // 创建带默认quantity的新对象，不修改原始数据
      const productWithQuantity = {...item, quantity: 1};
      return (
        <div key={productWithQuantity?.id} className="product_items">
          {/* 其余代码不变 */}
          <span
            onClick={() =>
              dispatch({ type: "ADD_TO_BASKET", basket: productWithQuantity })
            }
          >
            Add To Cart
          </span>
          {/* 其余代码不变 */}
        </div>
      );
    })}
</div>

5. 可选优化：移除数量为0的商品 #

如果希望商品数量减到0时自动从购物车移除，可以修改DECREASE_PRODUCT逻辑：

case 'DECREASE_PRODUCT':
  const tempDecrease = (state.basket || [])
    .filter(item => {
      if(item.id === action.basket.id){
        return item.quantity - 1 > 0; // 数量减1后大于0才保留
      }
      return true;
    })
    .map(item => {
      if(item.id === action.basket.id){
        return {...item, quantity: item.quantity - 1};
      }
      return item;
    });
  return {...state, basket: tempDecrease};

修复以上问题后，点击增减按钮时reducer会正确更新购物车数据并保持state结构，组件能正常读取商品数量，结算页即可恢复正常渲染。

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