Redux 项目删除按钮不起作用

Question

我正在开发 redux 项目，该项目具有“添加到卡”按钮和从卡中删除项目。删除按钮不起作用，当我检查 console.log 时，它正在将项目添加到卡中。我正在尝试修复它，但它不起作用。

我正在添加下面的代码

import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "recipeCart",
  initialState: {
    itemsInCart: []
  },
  reducers: {
    addItemToCard: (state, action) => {
      const timeId = new Date().getTime()
      state.itemsInCart.push({
        idFood: timeId,
        dishId: action.payload.dish.idFood,
        quantity: action.payload.quantity,
        totalPrice: action.payload.quantity * action.payload.dish.price
      })
    },
    removeItemFromCart: (state, action) => {
      state.itemsInCart = state.itemsInCart.filter(
        itemsInCart => itemsInCart.idFood !== action.payload.itemsInCartId
      )
    }
  }
})

export const getTotalPrice = state => {
  return state.recipeCart.itemsInCart.reduce((total, itemsInCart) => {
    return itemsInCart.totalPrice + total
  }, 0)
}

export const getCartItems = state => state.recipeCart.itemsInCart;
export const { addItemToCard, removeItemFromCart } = slice.actions;
export default slice.reducer

import dishesData from "../data/dishesData";
import { removeItemFromCart } from "../redux/cartSliceFood.js";
import { useDispatch } from "react-redux";

const CartItemFood = ({ itemsInCart }) => {
  const recipeDishes = dishesData.find(
    item => item.idFood === itemsInCart.dishId
  )
  const dispatch = useDispatch();
  console.log(recipeDishes)
    
  return (
    <div>
      <div className="headerCart">
        <div className="container-cart"> 
          <p className="cartPar">{recipeDishes.name}</p>
          <p className="cartPar">{itemsInCart.quantity} portion(s)</p>
          <p className="cartPar price">
            Price: ${recipeDishes.price * itemsInCart.quantity}
          </p>
          <span
            onClick={() => dispatch(removeItemFromCart({
              itemsInCartId: itemsInCart.id
            }))}
          >
            <img
              className="icon cartPar"
              src="https://img.icons8.com/material-outlined/48/000000/trash--v1.png"
              alt="icon"
            /> 
          </span>
        </div>
      </div>
    </div>  
  )
}

export default CartItemFood;

import { configureStore } from '@reduxjs/toolkit';
import dishes from './DessertComponent/redux/dishesSlice';
import cart from './DessertComponent/redux/cartSlice';
import recipeDishes from './FoodComponent/redux/dishesSliceFood';
import recipeCart from './FoodComponent/redux/cartSliceFood'

export const store = configureStore({
  reducer: {
    dishes: dishes,
    cart: cart,
    recipeDishes: recipeDishes,
    recipeCart: recipeCart
  }
})

Answer 1

我认为

有一些错误

onClick={() => dispatch(removeItemFromCart({itemsInCartId: itemsInCart.id}))}

应该是

onClick={() => dispatch(removeItemFromCart({itemsInCartId: itemsInCart.idFood}))}

您使用的是 idFood 密钥，而不是 id。

Answer 2

在 addItemToCard 减速器中，您使用 idFood 为每个项目分配一个唯一的 ID：

state.itemsInCart.push({
idFood: timeId,  // Unique ID for each item
dishId: action.payload.dish.idFood,
quantity: action.payload.quantity,
totalPrice: action.payload.quantity * action.payload.dish.price
});

但是，当您尝试删除商品时，您将在removeItemFromCart 调度中使用 itemsInCart.id：

mdispatch(removeItemFromCart({
  itemsInCartId: itemsInCart.id  // This should be itemsInCart.idFood
}));

您的购物车商品中不存在该密钥 ID；它实际上是 idFood。因此，在识别要删除的商品时，您应该使用 itemsInCart.idFood。这种不匹配就是删除不起作用的原因。