如何用Redux Toolkit实现购物车按钮添加/数量状态的条件渲染？

问题根源 #

核心问题是ID匹配错误：

• 点击"添加到购物车"时，你为商品生成了新的uuidv4()作为ID存入Redux
• 但判断商品是否在购物车时，用的是原始item.id（来自data.json的ID）
• 两个ID完全不一致，导致isInCart永远为false，无法切换到数量控制状态

修复步骤 #

1. 移除不必要的UUID生成，使用原始商品ID #

修改AddToCart组件的handleAddToCart，直接传入原始商品对象，不要覆盖ID：

const handleAddToCart = () => {
  // 删掉uuid生成逻辑，直接使用item本身的ID
  dispatch(addItem(item));
};

2. 为增减按钮绑定事件处理 #

原数量控制组件没有绑定点击事件，添加对应的Redux dispatch逻辑：

// 先引入removeItem action
import { addItem, removeItem } from "../features/AddToCartFeature/AddToCartSlice";

// 新增增减数量的处理函数
const handleIncrease = () => {
  dispatch(addItem(item)); // 复用addItem逻辑，已有商品时会自动增加数量
};

const handleDecrease = () => {
  dispatch(removeItem(item));
};

// 为按钮绑定点击事件
<img
  src={decreaseButton}
  alt="decrement button"
  className="border border-white p-1 rounded-full w-5 h-5 cursor-pointer"
  onClick={handleDecrease}
/>
<p className="mx-[59px]">{quantity}</p>
<img
  src={increaseButton}
  alt="increment button"
  className="border border-white p-1 rounded-full cursor-pointer"
  onClick={handleIncrease}
/>

3. 优化Item组件的key值（可选） #

循环渲染商品时，用item.id作为key替代index，避免潜在的渲染问题：

{data.map((item) => (
  <div key={item.id} className="grid relative">
    // ...其他商品内容
  </div>
))}

4. 验证Redux Slice逻辑（确认无问题） #

你的AddToCartSlice逻辑本身是正确的，只要传入原始商品ID，就能正确匹配已有商品并更新数量。

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