Javascript 使用React-Redux-TypeError时出现以下错误：无法读取属性'；id'；未定义的

我正在使用React-Redux进行一个电子商务项目，似乎无法解决这个一直困扰着我的错误。我试图通过cart reducer将单击的项目（以及它的道具，如名称、imageUrl等）添加到cartItems数组中。创建了一个函数来添加utils，并尝试在reducer中导入和使用它（函数向名为quantity的项添加一个新的道具，以计算该项的频率）。但由于某些原因，该函数每次仅使用1个道具（数量）创建一些新元素，而不是使用添加的道具添加单击的元素

我的动作组件代码-

import CartActionTypes from './cart.types';

export const toggleCartHidden = () => ({
  type: CartActionTypes.TOGGLE_CART_HIDDEN
});

export const addItem = item => ({
  type: CartActionTypes.ADD_ITEM,
  action: item
});

大车减速器-

import CartActionTypes from './cart.types';
import { addItemToCart } from './cart.utils';

const INITIAL_STATE = {
  hidden: true,
  cartItems: []
};

const cartReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CartActionTypes.TOGGLE_CART_HIDDEN:
      return {
        ...state,
        hidden: !state.hidden
      };
    case CartActionTypes.ADD_ITEM:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload)
      };
    default:
      return state;
  }
};

export default cartReducer;

乌提尔斯-

export const addItemToCart = (cartItems, cartItemToAdd) => {
    const existingCartItem = cartItems.find(
      cartItem => cartItem.id === cartItemToAdd.id
    );
  
    if (existingCartItem) {
      return cartItems.map(cartItem =>
        cartItem.id === cartItemToAdd.id
          ? { ...cartItem, quantity: cartItem.quantity + 1 }
          : cartItem
        )
    }
  
    return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
  };

下面的集合项组件，显示应添加的项（此组件被调用到显示组件中，显示组件将项数据映射到项组件以显示所有项）。单击的项目应通过减速机添加为同一项目创建的数量道具

import React from 'react';
import { connect } from 'react-redux';

import CustomButton from '../custom-button/custom-button.component';
import { addItem } from '../../Redux/cart/cart.actions';

import './collection-item.styles.css';

const CollectionItem = ({ item, addItem }) => {
  const { name, price, imageUrl } = item;

  return (
    <div className='collection-item'>
      <div
        className='image'
        style={{
          backgroundImage: `url(${imageUrl})`
        }}
      />
      <div className='collection-footer'>
        <span className='name'>{name}</span>
        <span className='price'>{price}</span>
      </div>
      <CustomButton onClick={() => addItem(item)} inverted>
        Add to cart
      </CustomButton>
    </div>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItem(item))
});

export default connect(
  null,
  mapDispatchToProps
)(CollectionItem);

从“React”导入React；
从'react redux'导入{connect}；
从“../custom button/custom button.component”导入CustomButton；
从“../../Redux/cart/cart.actions”导入{addItem}；
导入“./collection item.styles.css”；
const CollectionItem=（{item，addItem}）=>{
const{name，price，imageUrl}=item；
返回(
{name}
{price}
附加项（项目）}反向>
添加到购物车
);
};
const mapDispatchToProps=调度=>({
addItem:item=>dispatch（addItem（item））
});
导出默认连接(
无效的
mapDispatchToProps
)（收集项目）；

集合预览（使用CollectionItem）-

从“React”导入React；
从“../collection item/collection item.component”导入CollectionItem；
导入“./collection preview.styles.css”；
const CollectionPreview=（{title，items}）=>(
{title.toUpperCase（）}
{项目
.过滤器（（项目，idx）=>idx<4）
.map（项目=>(
))}
);
导出默认集合预览；

错误截图-

---

右（ADD_ITEM）操作被触发，它正在捕获单击的元素，但不知何故它没有被添加到cartItems数组中。任何帮助都将不胜感激。

在下一张州卡中，我只看到数量值。您可以扩展阵列吗？您可以提供正在使用的文件的代码吗？您的操作没有有效负载。它具有

操作

属性。因此，要么将其重命名为

payload

，要么在您的reducer中将其更改为

cartItems:addItemToCart（state.cartItems，action.action）

@Samarth，然后在action对象中将其命名为

payload

，而不是action:

export const addItem=item=>（{type:CartActionTypes.ADD\u item，action:item}）
action.payload
只是action对象的一个属性。但是您正在发送一个具有以下属性的对象：
类型
和
操作
，因此
有效负载
未定义，并且ID丢失。在图像下一个状态的cartims项中，我只看到数量值。您可以扩展阵列吗？您可以提供正在使用的文件的代码吗？您的操作没有有效负载。它具有
操作
属性。因此，要么将其重命名为
payload
，要么在您的reducer中将其更改为
cartItems:addItemToCart（state.cartItems，action.action）
@Samarth，然后在action对象中将其命名为
payload
，而不是action:
export const addItem=item=>（{type:CartActionTypes.ADD\u item，action:item}）
action.payload
只是action对象的一个属性。但是您正在发送一个具有以下属性的对象：
type
和
action
，因此
payload
未定义，并且缺少ID
import React from 'react';

import CollectionItem from '../collection-item/collection-item.component';

import './collection-preview.styles.css';

const CollectionPreview = ({ title, items }) => (
  <div className='collection-preview'>
    <h1 className='title'>{title.toUpperCase()}</h1>
    <div className='preview'>
      {items
        .filter((item, idx) => idx < 4)
        .map(item => (
          <CollectionItem key={item.id} item={item} />
        ))}
    </div>
  </div>
);

export default CollectionPreview;