Javascript React-Redux，TypeError:addItem不是函数

我对redux相当陌生。我正在学习使用React和Redux的电子商务网站教程。 我有一个CollectionItem组件，它有一个调用addItem函数的按钮，该函数将指定的项目添加到购物车中。 addItem函数适用于从CollectionPreview生成的CollectionItems组件，但不适用于从集合生成的CollectionItems组件。无论何时单击按钮，我都会得到一个TypeError:addItem不是一个函数。 在下面查找代码

集合项目组件

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

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

大车减速器

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;

---

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

因此，在集合组件中，您会得到一个未连接redux的版本，因此您无法访问MapStateTrops中传递的道具

只需将

import{CollectionItem}

替换为

import CollectionItem

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;