请帮助我解决我的REACT问题。在购物车页面上,当我尝试增加数量或减少数量产品的数量时,我得到了这种类型的错误。我已将错误附在图片中。请查看图片。
以下是我的代码:Cart.js。尝试更新购物车页面上的产品数量。但出现错误,如图片所示。
import React, { Fragment } from 'react';
import "./Cart.css";
import CartItemCard from "./CartItemCard";
import { useSelector, useDispatch } from 'react-redux'
import { addItemsToCart } from '../../action/cartAction';
const Cart = () => {
const dispatch = useDispatch();
const { cartItems } = useSelector((state) => state.cart);
const increaseQuantity = (id, quantity, stock) => {
const newQty = quantity + 1 ;
if(stock <= quantity) {
return;
}
dispatch(addItemsToCart(id, newQty));
};
const decreaseQuantity = (id, quantity) => {
const newQty = quantity - 1 ;
if (1 >= quantity) {
return;
}
dispatch(addItemsToCart(id, newQty));
};
return (
<Fragment>
<div className="cartPage">
<div className="cartHeader">
<p>Product</p>
<p>Quantity</p>
<p>Subtotal</p>
</div>
{cartItems && cartItems.map((item) => (
<div className="cartContainer" key={item.product} >
<CartItemCard item={item} />
<div className="cartInput">
<button onClick={() => decreaseQuantity(item.product, item.quantity)} > - </button>
<input type="number" readOnly value={item.quantity} />
<button onClick={() => increaseQuantity(item.product, item.quantity, item.stock)} > + </button>
</div>
<p className="cartSubtotal">{`$${item.price*item.quantity}`}</p>
</div>
))}
<div className="cartGrossTotal">
<div></div>
<div className="cartGrossTotalBox">
<p>Gross Total</p>
<p>{`$600`}</p>
</div>
<div></div>
<div className="checkOutBtn">
<button>Check Out</button>
</div>
</div>
</div>
</Fragment>
);
};
export default Cart;
以下是操作:购物车动作.js
import {ADD_TO_CART} from "../constants/cartConstants";
import axios from "axios";
export const addItemsToCart = (id, quantity) => async (dispatch,getState) => {
const { data } = await axios.get(`/api/v1/product/${id}`);
dispatch({
type: ADD_TO_CART,
payload: {
product: data.product._id,
name: data.product.name,
price: data.product.price,
image: data.product.images[0].url,
stock: data.product.Stock,
quantity,
},
});
localStorage.setItem("cartItems",JSON.stringify(getState().cart.cartItems));
};
推车减速器代码。推车减速器:
import {ADD_TO_CART} from "../constants/cartConstants";
export const cartReducer = (state = { cartItems: [] }, action ) => {
switch (action.type) {
case ADD_TO_CART:
const item = action.payload;
const isItemExist = state.cartItems.find(
(i) => i.product === item.product
);
if(isItemExist) {
return {
...state,
cartItems: state.cartItems.map((i) =>
i.product === isItemExist.product ? true : i
),
};
} else {
return{
...state,
cartItems: [...state.cartItems, item],
};
}
default:
return state;
}
};
React存储。存储:
import { createStore,combineReducers,applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "@redux-devtools/extension";
import { productDetailsReducer, producReducer } from "./reducers/productReducer";
import { forgotPasswordReducer, profileReducer, userReducer } from "./reducers/userReducer";
import { cartReducer } from "./reducers/cartReducer";
const reducer = combineReducers({
products: producReducer,
productDetails: productDetailsReducer,
user: userReducer,
profile: profileReducer,
forgotPassword: forgotPasswordReducer,
cart: cartReducer,
});
let initialState = {
cart: {
cartItems: localStorage.getItem("cartItems")
? JSON.parse(localStorage.getItem("cartItems"))
: [],
}
};
const middleware = [thunk]
const store = createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware)
));
export default store;
1条答案
按热度按时间vbkedwbf1#
谢谢大家的意见和看法。我得到了解决方案。这里是在CartReducer代码我添加了true而不是项目。这是解决方案。谢谢。