javascript - React-Redux，TypeError:addItem不是一个函数

我是Redux的新手。我正在学习一个使用React和Redux的电子商务站点教程。
我有一个CollectionItem组件，该组件具有一个按钮，该按钮调用addItem函数，该函数将指定的项目添加到购物车。
addItem函数适用于从CollectionPreview生成的CollectionItems组件，但是不适用于从Collections生成的CollectionItems组件。每当单击按钮时，我都会收到TypeError：addItem不是函数。
在下面找到代码

CollectionItem组件

import React from "react";
import "./collection.item.style.scss";
import CustomButton from "../custom-button/custom.button.component";
import { connect } from "react-redux";
import { addItem } from "../../redux/cart/cart.action";

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

  return (
    <div className="CollectionItem">
      <div
        className="Image"
        style={{
          backgroundImage: `url(${imageUrl})`
        }}
      />
      <div className="footer">
        <span className="ItemName">{name}</span>
        <span className="ItemPrice">#{price}</span>
      </div>
      <CustomButton onClick={() => addItem(item)} color="outline-dark">
        Add to Cart
      </CustomButton>
    </div>
  );
};

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

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

CollectionPreview组件

import React, { Component } from "react";
import CollectionItem from "../collection.item/collection.item.component";
import "./collection.preview.style.scss";

class Preview extends Component {
  render() {
    const { title, items } = this.props;
    return (
      <div className="CollectionPreview">
        <h1 className="CollectionTitle">{title}</h1>
        <div className="Preview">
          {items
            .filter((item, index) => index < 4)
            .map(item => (
              <CollectionItem key={item.id} item={item} />
            ))}
        </div>
      </div>
    );
  }
}
export default Preview;

收集组件

import React, { Component } from "react";
import "./collection.style.scss";
import { connect } from "react-redux";
import { selectCollection } from "../../redux/shop/shop.selector";
import { CollectionItem } from "../collection.item/collection.item.component";

class Collection extends Component {
  render() {
    const { title, items } = this.props.collections;
    return (
      <div className="collection-page">
        <h2 className="title"> {title}</h2>
        <div className="container items">
          {items.map(item => (
            <CollectionItem key={item.id} item={item} />
          ))}
        </div>
      </div>
    );
  }
}

const mapPropsToState = (state, ownProps) => ({
  collections: selectCollection(ownProps.match.params.collectionId)(state)
});

export default connect(mapPropsToState)(Collection);

Redux购物车动作

import { TOGGLE_CART } from "./cart.types";
import { ADD_ITEMS } from "./cart.types";
import { DELETE_ITEMS } from "./cart.types";
import { INCREASE_QUANTITY } from "./cart.types";
import { DECREASE_QUANTITY } from "./cart.types";

export const toggleCart = () => {
  return {
    type: TOGGLE_CART
  };
};

export const addItem = item => {
  return {
    type: ADD_ITEMS,
    payload: item
  };
};

export const deleteItem = item => {
  return {
    type: DELETE_ITEMS,
    payload: item
  };
};

export const increaseItem = item => {
  return {
    type: INCREASE_QUANTITY,
    payload: item
  };
};

export const decreaseItem = item => {
  return {
    type: DECREASE_QUANTITY,
    payload: item
  };
};

推车减速器

import { TOGGLE_CART } from "./cart.types";
import { ADD_ITEMS } from "./cart.types";
import { addItemToCart } from "./cart.utils";
import { DELETE_ITEMS } from "./cart.types";
import { deleteItemFromCart } from "./cart.utils";
import { increaseCartItem } from "./cart.utils";
import { decreaseCartItem } from "./cart.utils";
import { DECREASE_QUANTITY } from "./cart.types";
import { INCREASE_QUANTITY } from "./cart.types";

const initialState = {
  showCart: false,
  cartItems: []
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_CART:
      return {
        ...state,
        showCart: !state.showCart
      };
    case ADD_ITEMS:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload)
      };
    case DELETE_ITEMS:
      return {
        ...state,
        cartItems: deleteItemFromCart(state.cartItems, action.payload)
      };
    case INCREASE_QUANTITY:
      return {
        ...state,
        cartItems: increaseCartItem(state.cartItems, action.payload)
      };
    case DECREASE_QUANTITY:
      return {
        ...state,
        cartItems: decreaseCartItem(state.cartItems, action.payload)
      };
    default:
      return state;
  }
};

export default cartReducer;

最佳答案

只需检查您的导入，即可在预览组件中使用默认导入和集合中的命名导入

因此，在您的Collection组件中，您获得的不是Redux连接版本，因此您无权访问mapStateToProps中传递的道具。

只需将import { CollectionItem }替换为import CollectionItem