redux 无法从状态片访问对象属性

sg3maiej  于 2023-05-29  发布在  其他
关注(0)|答案(1)|浏览(121)

我正尝试使用Redux-Toolkit为我的Web应用程序制作一个购物车切片。在我的cartSlice.js文件中,我希望能够添加/删除购物车中的物品,并在购物车中已经有物品时增加/减少物品的数量。我遇到的主要问题是无法从cartSlice.js文件访问quantity属性。
下面是cart和cartSlice文件的代码,以及item组件和storeItems文件,storeItems文件是商店拥有的对象数组。
cart.js:

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 quantity={item.quantity} >{item.name} x{item.quantity}</p>
            ))}
        </div>
    )
}

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);
            const item = state.cart.find((item) => item.id === action.payload);

            if (itemInCart > 1) {
                state.total += action.payload.price;
                item.quantity += 1;
            } else {
                state.cart.push({ ...action.payload, quantity:  1});
                state.total += action.payload.price;
                item.quantity += 1;
            }
        },
        removeItem: (state, action) => {
            const itemInCart = state.cart.find((item) => item.id === action.payload.id);
            const item = state.cart.find((item) => item.id === action.payload);

            if (itemInCart.quantity === 1) {
                const removeItem = state.cart.filter((item) => item.id !== action.payload.id);
                state.cart = removeItem;
                state.total -= action.payload.price;
                item.quantity -= 1;
            } else {
                item.quantity -= 1;
            }  
        },
    },
})

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

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={require('../../styles/image-not-found.jpg')} /> */}
            <img src={item.image} />
            <h3>{item.name}</h3>
            <p>Price: ${item.price}</p>
            <div className="buttons">
                    <button onClick={() => onAddToCartHandler(item)}>+</button>
                    <button onClick={() => onRemoveFromCartHandler(item)}>-</button>
            </div>
        </div>
    )
}

storeItems.js:

export const produce = [
    {
        id: 1,
        name: "Carrots",
        price: 2.89,
        image: "https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg",
        quantity: 0,
    },
    {
        id: 2,
        name: "Cucumbers",
        price: 0.99,
        image: "https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/cucumbers2.jpg?itok=YISLeW4e",
        quantity: 0,
    },
    {
        id: 3,
        name: "Bell peppers",
        price: 0.76,
        image: "https://hosstools.com/wp-content/uploads/2020/10/mini-belle-pepper-mix.jpg",
        quantity: 0,
    },
    {
        id: 4,
        name: "Avocados",
        price: 1.26,
        image: "https://blog.lexmed.com/images/librariesprovider80/blog-post-featured-images/avocadosea5afd66b7296e538033ff0000e6f23e.jpg?sfvrsn=a273930b_0",
        quantity: 0,
    },
    {
        id: 5,
        name: "Spinach",
        price: 2.99,
        image: "https://cdn.britannica.com/30/82530-050-79911DD4/Spinach-leaves-vitamins-source-person.jpg",
        quantity: 0,
    },
    {
        id: 6,
        name: "Kale",
        price: 2.30,
        image: "https://i0.wp.com/images-prod.healthline.com/hlcmsresource/images/AN_images/benefits-of-kale-1296x728-feature.jpg?w=1155&h=1528",
        quantity: 0,
    },
    {
        id: 7,
        name: "Tomatoes",
        price: 1.05,
        image: "https://www.almanac.com/sites/default/files/styles/or/public/image_nodes/tomatoes_helios4eos_gettyimages-edit.jpeg?itok=2owPswip",
        quantity: 0,
    }
]
wribegjk

wribegjk1#

正如你所提到的,只有一些文件的代码。你提到你的后端工作正常,但在国家,你不能访问数量属性。这是因为你在cartSlice.js文件中犯了一个小错误。
在item.js的dispatch方法中,你已经将整个Item对象传递给了reducers函数,但是在item变量中的find方法中,你将item.id与整个item对象匹配。所以它永远不会找到任何项目。你这么做...
dispatch(addToCart);您已传递了整个对象。
而不是像这样使用,可能它会给予你访问的数量。你做了这些。const item = state.cart.find((item)=> item.id === action.payload);
像这样... const item = state.cart.find((item)=> item.id === action.payload.id);
此外,如果你发现任何问题,尝试在reducer中记录动作,看看你得到了什么...谢谢...

相关问题