javascript - React-Redux，类型错误 : addItem is not a function

Question

我对 redux 还很陌生。我正在学习使用 React 和 Redux 的电子商务网站教程。我有一个 CollectionItem 组件，它有一个调用 addItem 函数的按钮，该函数将指定的项目添加到购物车。addItem 函数适用于从 CollectionPreview 生成的 CollectionItems 组件，但不适用于从 Collections 生成的 CollectionItems 组件。每当单击按钮时，我都会收到 TypeError: addItem is not a function。找到下面的代码

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

集合预览组件

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

推车 reducer

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;

Answer 1

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

因此，在您的 Collection 组件中，您将获得一个未连接 redux 的版本，因此您无权访问在 mapStateToProps 中传递的 props。

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