React Native Redux购物车删除首项仅移除末项问题如何修复

问题根因 #

你遇到的删除逻辑异常是两个常见问题共同导致的：

• Reducer中的删除判断使用了对象引用比较，不可靠：cartItem !== action.payload是直接比对两个对象的内存地址，如果传递给删除方法的item对象和Redux store中存储的item对象不是同一个引用，过滤规则会失效。
• 列表渲染时大概率使用了数组索引作为key值：这是导致「删除第一项实际视图删除最后一项」的核心原因。当你用数组index做key时，删除某一项后后续所有元素的index都会前移，React Native的虚拟DOM diff算法无法正确识别需要移除的节点，会误判最后一个节点是多余节点进行移除。

修复方案 #

1. 修正Reducer删除逻辑 #

将REMOVE_TO_CART分支的过滤规则改为用商品唯一_id匹配，和你新增逻辑的判断规则保持一致：

case REMOVE_TO_CART:
  return state.filter(cartItem => cartItem._id !== action.payload._id);

2. 修正列表渲染的key属性 #

找到你遍历cartItems渲染购物车项的代码，将key从数组索引改为商品的_id：

// 错误示例（用index当key）
cartItems.map((item, index) => <CartItem key={index} item={item} />)

// 正确写法
cartItems.map((item) => <CartItem key={item._id} item={item} />)

3. 可选优化（符合Redux规范） #

你当前CLEAR_TO_CART分支的写法不符合Redux reducer规范，不需要给state变量赋值，直接返回新状态即可：

case CLEAR_TO_CART:
  return [];

内容的提问来源于stack exchange，提问作者Md. Kamrul Islam