TypeError: addToCart 不是一个函数 - React/Redux

Question

我在 youtube 上关注这个 tutorial 为我的电子商务项目实施 redux。我完全按照讲师的操作方式进行操作，但是在尝试将产品添加到购物车时出现此错误“TypeError：addToCart 不是函数”。

我的设置和教程之间的唯一区别是我将数据传递到我的卡片以使用道具显示产品，而教程使用 redux 呈现产品信息。

我在网上查看了很多关于此错误的帖子，但似乎没有一个适用于我，因为到目前为止我尝试过的所有潜在解决方法都不起作用。

所有相关代码如下。

卡片.js

import React, {useState} from 'react';


import 'antd/dist/antd.css';
import { Card, Avatar, Button, Modal } from 'antd';
import { EditOutlined, EllipsisOutlined, PlusCircleTwoTone, SettingOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';
import {addToCart}  from '../Redux/Shopping/ShoppingActions'



const { Meta } = Card;



function Cardo(props, {addToCart}) {

    //Setting variables up to use for useState so to manage state of modal
    //Default state is false so not to be visible
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //^^^All the const's above will be called below within the card or modal to manage the state of the modal



    return (
        <div className="card">
            <Card
                style={{ width: "340px", textAlign: 'center' }}
                cover={<img className="card-cover" src={props.image}/>}
                actions={[
                    // <SettingOutlined key="setting" />,
                    // <EditOutlined onClick={showModal} key="edit" />,
                    <EllipsisOutlined onClick={showModal} key="ellipsis" />,
                ]}
            >
                <Meta
                    avatar={<Button className="card-button" onClick={() => addToCart(props.id)} type="primary" shape="circle"><PlusCircleTwoTone /></Button>}
                    title={props.header}
                    description={props.price}
                />
            </Card>
            <Modal title={props.header} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>{props.description}</p>
            </Modal>
        </div>
    )
}

const mapDispatchToProps = (dispatch) => {
    return{
        addToCart: (id) => dispatch(addToCart(id)),
    }
}

export default connect(null, mapDispatchToProps)(Cardo)

ShoppingActions.js

import * as actionTypes from './ShoppingTypes';

export const addToCart = (itemID) => {
    return{
        type: actionTypes.ADD_TO_CART,
        payload: {
            id: itemID
        },
    };
};

export const removeFromCart = (itemID) => {
    return{
        type: actionTypes.REMOVE_FROM_CART,
        payload: {
            id: itemID
        },
    };
};

export const adjutQty = (itemID, value) => {
    return{
        type: actionTypes.ADJUST_QTY,
        payload: {
            id: itemID,
            qty: value,
        },
    };
};

export const loadCurrentItem = (item) => {
    return{
        type: actionTypes.LOAD_CURRENT_ITEM,
        payload: item,
    };
};

ShoppingReducer.js

import * as actionTypes from './ShoppingTypes';
import data from '../../Data/MenuData';

const INITIAL_STATE = {
    products: data,//(id, title, description, price, img)
    cart: [], //(id, title, description, price, img, qty)
    currentItem: null,
}

//reducer is just function that takes in state and action - action is part that gets dispatched which contains a type
const shopReducer = (state = INITIAL_STATE, action) => {
    switch(action.type){
        case actionTypes.ADD_TO_CART:
            //get items data from products array
            const item = state.products.find((prod) => prod.id === action.payload.id);
            //we need to check if item is in cart already
            const inCart = state.cart.find((item) => item.id === action.payload.id ? true : false);
            return{
                //we spread the state first so not to lose current or all the products
                ...state,
                //inCart we check if it is in cart and that return true - if so map through cart and find that id
                cart: inCart ? state.cart.map((item) =>
                     item.id === action.payload.id 
                     //Then spread all of data inside and change quantity if needed
                        ? {...item, qty: item.quantity + 1} : item
                        ) //if not in cart then spread the array and add the item and quantity to state of cart 
                        : [...state.cart, { ...item, qty: 1}],
            };
        case actionTypes.REMOVE_FROM_CART:
            return{
                ...state,
                //this filters through array and deletes item we want to remove
                cart: state.cart.filter(item => item.id !== action.payload.id)
            };
        case actionTypes.ADJUST_QTY:
            return{
                ...state,
                //if i find id in cart I want to recreate object by spreading current item and setting qty set to original qty - else return item
                cart: state.cart.map((item) => item.id === action.payload.id ? {...item, qty: action.payload.qty} : item)
            };
        case actionTypes.LOAD_CURRENT_ITEM:
            return{
                ...state,
                currentItem: action.payload,
            };
        default:
            return state;
    }

}

export default shopReducer;

Answer 1

function Cardo(props, {addToCart}) {

这里的错误是addToCart 是props 的一个属性，所以它应该是这样的

function Cardo(props) {
  const {addToCart} = props

Answer 2

这不是你拿道具的方式

function Cardo(props, {addToCart})

如果你想制作所有道具，你只需制作

function Cardo(props)

然后使用props.addToCart 但如果你不想使用props.addToCart，你可以做到：

function Cardo(props: { addToCart })

所以现在您传递给{} 的所有项目都像{ addToCart, anotherProp, thirdProp } 来自props

你也可以这样使用：

function Cardo(props)

在它下面：

const { addToCart, anotherProp, thirdProp } = props;

然后就用普通的addToCart