未处理的拒绝类型错误：state.cartItems 未定义

如何解决未处理的拒绝类型错误：state.cartItems 未定义

我正在关注 MERN STACK 教程并在设置我的购物车时 这是我收到的错误，但是，我在我的减速器中 console.log 数据并显示它，但不知道为什么它会显示此错误

Unhandled Rejection (TypeError): state.cartItems is undefined

还有，为什么导师使用localStorage来存储数据，我们不能在获取Cart Action后直接发送给reducer... 有什么关系

谢谢

购物车操作

import { ADD_TO_CART } from '../constants/CartConstants';
import axios from "axios";

export const addToCart = (id,qty) => async (dispatch,getState) => {

    const { data } = await axios.get(`/api/products/${id}`);

    dispatch({
        type: ADD_TO_CART,payload: {
            product: data._id,name: data.name,image: data.image,price: data.price,countInStock: data.countInStock,qty
        }

    })

    localStorage.setItem('cartItems',JSON.stringify(getState().cart.cartItems))

商店

import {createStore,applyMiddleware,combineReducers} from 'redux';
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension';
import {productListReducer,productDetailsReducer } from './reducers/productReducer' ;
import {cartReducer} from "./reducers/cartReducer"

const reducer = combineReducers({
    productList: productListReducer,productDetails:productDetailsReducer,cart: cartReducer
});

const cartItemsFromStorage = localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : []

const initialState = {
    cart: cartItemsFromStorage
};

const middleware = [thunk];
const store = createStore(reducer,initialState,composeWithDevTools(applyMiddleware(...middleware)))

//composite with dev tools is used to connect our store with our devtools

export default store;

推车减速器

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 existItem = state.cartItems.find((x) => x.product === item.product)
            console.log(existItem)

            if (existItem) {
                return {
                    ...state,cartItems: state.cartItems.map(x => x.product === existItem.product ? item : x)
                }
            } else {
                return {
                    ...state,cartItems: [...state.cartItems,item]
                }
            }
        default:
            return state
    }
}

解决方法

确保这符合您的状态结构

localStorage.setItem('cartItems',JSON.stringify(getState().*cart.cartItems*))

如果你的名字不同，它可能会改变，例如

cartReducer.cartItems