商品未显示在购物车中

Question

我的 React Redux Cart 组件遇到问题，尽管通过 addItem 操作将项目添加到购物车状态，但它们并未在购物车页面上呈现。

问题：

当我使用 addItem 操作将商品添加到购物车时，我可以在 Redux DevTools 中或通过记录组件内的状态来查看状态更新。 但是，购物车组件不会显示添加的项目，尽管状态反映了它们的存在。 我检查过的内容：

确认 cartSlice 减速器中的 addItem 操作通过在添加商品后记录整个购物车状态来正确更新状态。 验证了购物车组件中的渲染逻辑，用于通过购物车状态进行映射并显示项目。

购物车：

export default function Cart() {
  const cart = useSelector((state) => state.cart);
  console.log("Cart component rendered");

  console.log(cart);

  return (
    <div
      className="cart-container"
      style={{ backgroundImage: `url(${Background})` }}
    >
      <h1>Your Cart</h1>
      {cart.length === 0 ? (
        <p>No items in your cart</p>
      ) : (
        cart.map((item) => (
          <div className="cart-item" key={item.id}>
            <img src={item.image} alt={item.name} />
            <div className="cart-item-details">
              <h3>{item.name}</h3>
              <p>Price: {item.price}DT</p>
            </div>
          </div>
        ))
      )}
    </div>
  );
}

购物车切片：

export const cartSlice = createSlice({
  name: "cart",
  initialState: {
    cart: [],
  },
  reducers: {
    addItem: (state, action) => {
      const { id, name, price, image, size, quantity } = action.payload;
      const calculatedPrice = price[size] * quantity;

      const newItem = {
        id,
        name,
        price: calculatedPrice,
        image,
        size,
        quantity,
      };

      state.cart = [...state.cart, newItem];
    },
    removeItem: (state, action) => {
      state.cart = state.cart.filter((item) => item.id !== action.payload.id);
    },
    cleanCart: (state) => {
      state.cart = [];
    },
  },
});

菜单：

useEffect(() => {
    setCalculatedPrice(prices[selectedSize] * quantity);
  }, [selectedSize, quantity, prices]);

  const handleAddToCart = () => {
    if (quantity > 0) {
      const selectedItem = {
        id,
        name,
        price: prices[selectedSize], // This assumes `prices` is an object with different price values
        image,
        size: selectedSize,
        quantity,
      };
      dispatch(addItem(selectedItem));
      navigate("/cart");
    } else {
      console.log("Choose more!");
    }
  };

店铺：

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import userReducer from "./user/userSlice.js";
import cartReducer from "./cart/cartSlice.js";

const persistConfig = {
  key: "root",
  version: 1,
  storage,
};

const persistedReducer = persistReducer(
  persistConfig,
  combineReducers({
    user: userReducer,
    cart: cartReducer,
  })
);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

Answer 1

问题

您没有选择足够深入的状态来获取实际的购物车数组。

const persistedReducer = persistReducer(
  persistConfig,
  combineReducers({
    user: userReducer,
    cart: cartReducer,
  })
);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

const cart = useSelector((state) => state.cart);

state.cart

仅 购物车切片，例如

{ cart: [....] }

这是购物车切片的状态。

此外，购物车减速器错误地假设

action.payload.price

是按大小划分的价格值的对象，并在计算总成本时尝试重新计算价格值。

const selectedItem = {
  id,
  name,
  price: prices[selectedSize], // <-- is already a price value
  image,
  size: selectedSize,
  quantity,
};
dispatch(addItem(selectedItem));

addItem: (state, action) => {
  const { id, name, price, image, size, quantity } = action.payload;
  const calculatedPrice = price[size] * quantity; // <-- price[size] is undefined

  const newItem = {
    id,
    name,
    price: calculatedPrice,
    image,
    size,
    quantity,
  };

  state.cart = [...state.cart, newItem];
},

price[size] * quantity

或

undefined * quantity

的结果是

NaN

解决方案

要访问购物车数组，请访问更深一层的所选购物车状态。

const cart = useSelector((state) => state.cart.cart);

或从选定的购物车状态

解构

cart

const { cart } = useSelector((state) => state.cart);

要解决总成本问题，您只需使用

price * quantity

，假设

price

是数字类型，例如数字类型或类似数字的字符串值。

addItem: (state, action) => {
  const { id, name, price, image, size, quantity } = action.payload;
  const calculatedPrice = price * quantity;

  const newItem = {
    id,
    name,
    price: calculatedPrice,
    image,
    size,
    quantity,
  };

  state.cart = [...state.cart, newItem];
},

或者可以在分派之前在 UI 中计算。

const selectedItem = {
  id,
  name,
  price: prices[selectedSize] * quantity,
  image,
  size: selectedSize,
  quantity,
};
dispatch(addItem(selectedItem));

addItem: (state, action) => {
  state.cart.push(action.payload);
},