React Redux购物车报错：Cannot read properties of undefined (reading 'find')

错误信息 #

caught (in promise) TypeError: Cannot read properties of undefined (reading 'find')
at cartReducers (cartReducers.js:8:1)

相关代码片段 #

cartReducer.js #

import { CART_ADD_ITEM, CART_REMOVE_ITEM } from '../constants/cartConstant';

const cartReducers = (state = { cartItems: [] }, action) => {
  switch (action.type) {
    case CART_ADD_ITEM:
      const item = action.payload;

      const existItem = state.cartItems.find((x) => x.product === item.product);

      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;
  }
};

export default cartReducers;

Store.js #

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import { productListReducer } from './reducers/productReducer.js';
import { productDetailsReducer } from './reducers/productReducer.js';
import cartReducers from './reducers/cartReducers.js';

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

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

const initialState = {
  cart: {
    cartItem: cartItemsFromStorage,
  },
};
const middleWare = [thunk];

const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleWare))
);

export default store;

cartAction.js #

import axios from 'axios';
import { CART_ADD_ITEM, CART_REMOVE_ITEM } from '../constants/cartConstant';

export const addToCart = (id, qnty) => async (dispatch, getState) => {
  const { data } = await axios.get(`/api/products/${id}`);

  dispatch({
    type: CART_ADD_ITEM,
    payload: {
      product: data._id,
      name: data.name,
      image: data.image,
      price: data.price,
      countInStock: data.countInStock,
      qnty,
    },
  });

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

CartScreen.js #

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Message from '../components/Message.js';
import Link from 'react-router-dom';
import {
  Row,
  Col,
  ListGroup,
  Image,
  Form,
  Button,
  Card,
} from 'react-bootstrap';

import { addToCart } from '../actions/cartAction.js';
import { useParams, useSearchParams } from 'react-router-dom';

const CartScreen = ({ match, location, history }) => {
  const { id } = useParams();
  const productId = id;

  const [searchParams, setSearchParams] = useSearchParams();
  const qnty = searchParams.get('qnty');

  const dispatch = useDispatch();

  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qnty));
    }
  }, [dispatch, productId, qnty]);

  console.log(qnty);
};

export default CartScreen;

问题原因 #

报错核心是state.cartItems为undefined，无法调用find()方法。根源在于Store.js中的initialState定义错误：
Reducer的初始状态是{ cartItems: [] }，但Store的initialState里给cart对象设置的属性是cartItem（缺少后缀s），覆盖了Reducer的初始状态，导致state.cartItems变为undefined。

解决方案 #

修改Store.js中的initialState，将cartItem改为cartItems，与Reducer的状态键名保持一致：

const initialState = {
  cart: {
    cartItems: cartItemsFromStorage, // 修正键名为cartItems
  },
};

额外优化建议：

1. CartScreen中从URL获取的qnty是字符串类型，建议转为数字后再传入方法：

const qnty = Number(searchParams.get('qnty')) || 1;

2. 确保addToCart中的qnty不会为undefined，避免后续逻辑异常。

内容的提问来源于stack exchange，提问作者NAVXBEDI