未定义的ReferenceError: mapdispatchtoprops未定义ReactJS Redux

Question

我试图建立一个购物车，以存储物品，我已经拿来的假苹果。但不知怎么，我得到了一个变量的RefereceError，我已经定义了这个变量。此外，没有使用addToCart方法。

这是我使用的主要文件：

import React, {useState, useEffect} from 'react'
import { useParams } from 'react-router'
import { NavLink } from 'react-router-dom';
import Skeleton from 'react-loading-skeleton';
import { connect } from 'react-redux';
import { addToCart } from '../redux/Shopping/shoppingActions';

const Product = ({productData, addToCart}) => {

const {id} = useParams();
const [product, setProduct] = useState([]);
const [loading, setLoading] = useState(false);

//fetch the clicked product 
useEffect(() => {
    const getProduct = async () => {
        setLoading(true);
        const response = await fetch(`https://fakestoreapi.com/products/${id}`); 
        setProduct(await response.json());
        setLoading(false);
    }
    getProduct();
}, [id]);


const Loading = () => {
    return(
        <div className="loading">
            Loading...
        </div>
    );
};

const mapdispatchtoprops = (dispatch) => {
    return{
        addToCart: (id) => dispatch(addToCart(id))
    };
};

const ShowProduct = () => {
    return(
        <div>
            <div className='productImage'>
                <img src={product.image} alt={product.title} height='400px' width='400px'/>
            </div>
            <div className='productText'>
                <h1 className='productTitle'>{product.title}</h1>
                <h4 className='productCategory'>{product.category}</h4>
                <p className='productRating'>Rating {product.rating && product.rating.rate}</p>
                    <i className='productRatingStars'></i>
                <h3 className='productPrice'>${product.price}</h3>
                <p className='productDescription'>{product.describtion}</p>
                <button className='addCart' onClick={()=>addToCart(productData.id)}>Add to Cart</button>
                <NavLink to='/cart' className='goCart'>Go to Cart</NavLink>
            </div>
        </div>
    )
}

return (
    <div>
        <div className='container'>
            <div className='row'>
                {loading?<Loading/>:<ShowProduct/>}
            </div>
        </div>
    </div>
)
}

export default connect (null, mapdispatchtoprops)(Product); 

这就是我从"addToCart“获得的文件：

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 adjustQty = (itemID, value) => {
    return{
        type: actionTypes.ADJUDT_QTY,
        payload: {
            id: itemID,
            qty: value,
        }, 
    };
};
export const loadCurrentItem = (itemID, value) => {
    return{
        type: actionTypes.LOAD_CURRENT_ITEM,
        payload: {
            id: itemID,
            qty: value,
        }, 
    };
};

Answer 1

您已经在mapdispatchtoprops组件中声明了Product，因此它在外部文件范围中是未定义的，您正试图在connect HOC中使用它。把它移到Product以外。

const Product = ({ productData, addToCart }) => {
  ...
};

const mapDispatchToProps = {
  addToCart
};

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