无法从Redux-Toolkit购物车切片访问quantity属性问题

核心问题分析 #

你的cartSlice.js里存在多处逻辑错误，导致无法正确访问quantity属性：

• 查找购物车内商品时，错误地用item.id === action.payload（action.payload是完整商品对象，不是id），导致找不到对应item，后续访问item.quantity会抛出"Cannot read properties of undefined"错误。
• 商品已存在的判断条件错误，用itemInCart > 1（itemInCart是对象/undefined，和数字比较无意义），应该判断itemInCart是否存在，再操作其quantity。
• 新增商品后多余的item.quantity += 1操作，此时item未定义，直接报错。
• 删除商品分支中，已移除商品后仍去修改item.quantity，属于无效且错误的操作。

修正后的完整代码 #

cartSlice.js

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

const cartSlice = createSlice({
    name: 'cart',
    initialState: {
        cart: [],
        total: 0,
    },
    reducers: {
        addToCart: (state, action) => {
            const itemInCart = state.cart.find((item) => item.id === action.payload.id);
            if (itemInCart) {
                // 商品已存在，增加数量和总价
                itemInCart.quantity += 1;
                state.total += action.payload.price;
            } else {
                // 商品不存在，添加到购物车并设置初始数量为1
                state.cart.push({ ...action.payload, quantity: 1 });
                state.total += action.payload.price;
            }
        },
        removeItem: (state, action) => {
            const itemInCart = state.cart.find((item) => item.id === action.payload.id);
            if (itemInCart) {
                if (itemInCart.quantity === 1) {
                    // 数量为1时，直接移除商品
                    state.cart = state.cart.filter(item => item.id !== action.payload.id);
                    state.total -= action.payload.price;
                } else {
                    // 数量大于1时，减少数量和总价
                    itemInCart.quantity -= 1;
                    state.total -= action.payload.price;
                }
            }
        },
    },
})

export const { addToCart, removeItem } = cartSlice.actions;
export const selectCart = (state) => state.cart;
export const cartReducer = cartSlice.reducer;

cart.js（移除无用的quantity属性）

import { React } from 'react';
import { useSelector } from "react-redux";
import { selectCart } from './cartSlice';

export const Cart = () => {
    const cart = useSelector(selectCart);

    return (
        <div className="cart">
            {cart.cart?.map((item) => (
                <p key={item.id}>{item.name} x{item.quantity}</p>
            ))}
        </div>
    )
}

Item.js（无需修改，保持原逻辑即可）

import { React } from 'react';
import styles from '../../styles/shopping.module.css';
import { addToCart, removeItem } from '../../features/Shopping/cart/cartSlice';
import { useDispatch } from "react-redux";

export default function Item({item}) {
    const dispatch = useDispatch();

    const onAddToCartHandler = (item) => {
        dispatch(addToCart(item));
    }
    const onRemoveFromCartHandler = (item) => {
        dispatch(removeItem(item));
    }

    return (
        <div key={item.id} className={styles.item}>
            <img src={item.image} alt={item.name} />
            <h3>{item.name}</h3>
            <p>Price: ${item.price}</p>
            <div className="buttons">
                <button onClick={() => onAddToCartHandler(item)}>+</button>
                <button onClick={() => onRemoveFromCartHandler(item)}>-</button>
            </div>
        </div>
    )
}

关键修正点说明 #

1. 商品查找逻辑：统一用action.payload.id匹配购物车内的商品id，确保能正确找到目标item。
2. 已存在商品判断：直接判断itemInCart是否存在（布尔值），替代原错误的数字比较。
3. 数量操作优化：仅在找到对应商品时才修改quantity，避免访问undefined的属性。
4. 移除商品逻辑：数量为1时过滤移除商品，否则减少数量，同时同步更新总价，移除无效的quantity修改操作。
5. Cart组件优化：给循环的p标签添加key属性（React列表渲染要求），移除无用的quantity DOM属性。

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