React结合Redux Toolkit删除购物车项误删全量且总价显示NaN问题

你遇到的两个异常（单删触发全量商品被清空、总价显示Final Total = $NaN）完全由删除处理函数的逻辑错误、状态赋值结构错乱导致，具体问题点：

• 过滤判断条件失效：你在筛选购物车列表时，根本没有使用点击要删除的目标商品的id做匹配，反而引用了全局静态的Products.__id做排除条件，完全没法精准定位要删除的单个商品。
• 状态嵌套结构错误：你把filter返回的新数组结果，直接赋值给函数入参的adv变量，最后写setCardItems([adv])——相当于把整个购物车的数组当成单个元素，再额外包一层数组赋值给state。最终购物车state不再是单商品对象组成的一维数组，而是嵌套了数组的二维结构，组件遍历时根本取不到商品的price、count字段，相乘计算总价时自然就会得到NaN，视觉上也会表现为点击删除后所有原有商品都被连带清空。
• 渲染细节隐患：map循环时直接把商品对象当成React的key使用，既会触发React的渲染告警，也会在后续状态更新时出现DOM diff匹配错误。

1. 重写删除处理函数逻辑 #

替换原有的错误删除代码：

// 修正后的删除逻辑
const removeCart = (targetItem) => {
  // 基于原有购物车数组，精准排除当前要删除的商品id，生成新的购物车列表
  const newCartList = selectedAdds.filter(item => item.id !== targetItem.id)
  // 直接把过滤后的一维数组赋值给state，不要多嵌套一层数组
  setCardItems(newCartList)
}

2. 优化组件渲染逻辑 #

修改CardItems组件内的冗余代码和结构问题：

• 把map循环的key替换为商品的唯一标识：key={item.id}
• 给价格、数量计算加兜底值，避免个别字段缺失触发计算异常：

  // 总价计算部分增加兜底逻辑
  carditems.reduce((total, item) => total + (item.price || 0) * (item.count || 1), 0)
  

• 去掉无效判空逻辑：map循环遍历到的item本身就是存在的有效对象，不需要额外写{(item) ? <button>...</button>}这种冗余判断。

3. 适配Redux Toolkit的规范写法 #

项目已经在用Redux Toolkit，不需要在组件内手动维护购物车的setState逻辑，可以直接在cartSlice中定义删除商品的reducer，利用RTK内置的Immer做不可变更新，从根源上避免手动拼接数组出现的结构错误：

// cartSlice 示例代码
import { createSlice } from '@reduxjs/toolkit'

const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    removeItem: (state, action) => {
      // 按传入的商品id做过滤，不需要手动嵌套数组
      return state.filter(item => item.id !== action.payload)
    }
  }
})

组件中调用时，直接dispatch要删除的商品id即可，不需要在组件层手动处理数组过滤。

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