axios 更新产品数量时购物车页出错

zpf6vheq  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(204)

帮助我解决我的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;
vbkedwbf

vbkedwbf1#

谢谢大家的意见和看法。我得到了解决方案。这里是在CartReducer代码我添加了true而不是项目。这是解决方案。谢谢。

if(isItemExist) {
  return {
    ...state,
    cartItems: state.cartItems.map((i) =>
      i.product === isItemExist.product ? item : i
      ),
  }
};

相关问题