Redux Toolkit电商网站添加商品后总价变为null问题求助

核心问题 #

1. 商品价格传递错误：你在添加商品时，传递的是包含oneProduct属性的外层对象，而非实际商品数据，导致action.payload.price为undefined，计算总价时出现NaN（表现为null）。
2. 数量逻辑错误：误用购物车总数量作为单个商品的购买数量，第一次添加时该值为0，直接导致商品总价计算错误；同时Cart切片中更新购物车总数量时，固定加1而非单个商品的购买数量。

修复步骤 #

1. 修正商品页面的数量管理与添加逻辑

在ProductPage组件中：

• 添加单个商品的数量状态，替代从Redux获取购物车总数量：

const [itemQuantity, setItemQuantity] = useState(1); // 新增单个商品数量状态

• （可选）添加数量调整按钮，让用户可选择购买数量：

// 插入到页面的flex容器中
<div className="flex ml-6 items-center">
  <button onClick={() => setItemQuantity(Math.max(1, itemQuantity - 1))} className="bg-gray-100 px-2 py-1 rounded">-</button>
  <span className="mx-2">{itemQuantity}</span>
  <button onClick={() => setItemQuantity(itemQuantity + 1)} className="bg-gray-100 px-2 py-1 rounded">+</button>
</div>

• 修正addtocart函数，传递正确的商品数据和数量：

const addtocart = () => {
  const selectedProduct = product.oneProduct;
  if (selectedProduct) {
    dispatch(addProduct({
      ...selectedProduct,
      quantity: itemQuantity
    }));
  }
};

2. 修正Cart切片的总价与数量计算逻辑

在cartSlice中：

• 修复addProduct的数量累加和总价计算：

addProduct: (state, action) => {
  const { price, quantity = 1 } = action.payload;
  // 确保价格是有效数字，避免异常
  if (typeof price === 'number') {
    state.products.push(action.payload);
    state.quantity += quantity; // 累加单个商品的购买数量，而非固定加1
    state.total += price * quantity;
  }
},

额外优化（可选） #

removeProduct逻辑存在对象引用匹配问题（用indexOf查找对象无法匹配相同数据的不同引用），建议改用商品ID查找：

removeProduct: (state, action) => {
  const productId = action.payload.id;
  const index = state.products.findIndex(item => item.id === productId);
  if (index !== -1) {
    state.quantity -= state.products[index].quantity;
    state.total -= state.products[index].price * state.products[index].quantity;
    state.products.splice(index, 1);
  }
},

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