我正尝试使用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,
}
]
1条答案
按热度按时间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中记录动作,看看你得到了什么...谢谢...