React Context API购物车RemoveItem失效、重复加购且总价显NaN如何解决

问题根因&修复方案 #

1. 移除操作参数不匹配（导致无法删除商品） #

你在CartState.js的removeItem方法中，dispatch时传入的payload是直接的商品ID值：

dispatch({ type: REMOVE_ITEM, payload: id });

但在CartReducer.js的REMOVE_ITEM分支中，错误尝试读取payload下的id属性：

cartItems: state.cartItems.filter((item) => item.id !== action.payload.id),

此时action.payload本身就是ID值，action.payload.id必然为undefined，item.id !== undefined永远为真，过滤后数组和原数组完全一致，自然删不掉商品。

修复方法：将CartReducer中REMOVE_ITEM分支的过滤条件改为

cartItems: state.cartItems.filter((item) => item.id !== action.payload),

2. 常量值重复（导致点击减号反而加购、总价NaN） #

你描述的「点击减号反而加购、总价变为NaN」现象，是因为Types.js中ADD_TO_CART和REMOVE_ITEM两个常量的赋值重复了，比如写为：

export const ADD_TO_CART = 'ADD_TO_CART'
export const REMOVE_ITEM = 'ADD_TO_CART' // 错误和上面赋值相同

此时你点击减号dispatchREMOVE_ITEM时，实际会走到ADD_TO_CART的分支逻辑，把传入的payload（商品ID，数字类型）直接加入购物车数组。新加入的数字类型元素没有price属性，reduce求和时undefined和数字相加就会得到NaN。

修复方法：修改Types文件，保证两个常量的赋值是完全不同的字符串，比如：

export const ADD_TO_CART = 'ADD_TO_CART'
export const REMOVE_ITEM = 'REMOVE_ITEM'

3. 额外逻辑优化建议 #

• 购物车加购逻辑建议做同商品合并：加购时判断已有相同ID的商品就叠加数量，不要每次都新增数组元素，避免重复渲染
• BasketItem.js中不要每个商品都遍历整个购物车数组算总价，建议把总价格移到购物车父组件计算；单个商品的数量不要显示cartItems.length（这是整个购物车的商品总数），应该显示当前商品的购买数量
• 所有按钮建议显式声明type="button"，避免放在form表单中时默认触发submit行为导致页面异常

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