型別錯誤：addToCart不是函式

我在反應中將產品添加到購物車時遇到問題，這是我第一次實作這種性質的東西。這是我的代碼

const data = {
    productData:[
        {   
            id: 1,
            image: "/assets/images/shop/product.jpeg",
            name: "product1",
        },
        {
            id: 2,
            image: "/assets/images/shop/product.jpeg",
            name: "product2",
        },
        {
            id: 3,
            image: "/assets/images/shop/product.jpeg",
            name: "product3"
        },
     ]
}

export default data


import React from 'react'
import {connect} from 'react-redux'
import { addToCart } from '../../../redux/actions/cart-action'
import { Card, Button, Container } from 'react-bootstrap'
import "../shop.css"

function ProductCard(props) {
    return (
        <div className="product-card col-sm-12 col-md-4 col-lg-3 pb-5">
                <div className="col-md-12 product overflow-hidden h-100 shadow-lg">
                    <img className="product-img card-img-top img-fluid" src={props.image} alt="product" />
                    <div className="text-center">
                    <div>{props.name}</div>
                    <div> {props.id} </div>
                    <div> {props.desc} </div>
                   
                    <div>#{props.price} </div>
                    <button className="btn btn-success mb-2" onClick={() => dispatch(addToCart(props.id))}>Add to Cart</button>
                    </div>
                </div>
            </div>
    )
}

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

export default connect (null, mapDispatchToProps) (ProductCard)


//Product List

const ProductList = ({products}) => {
  console.warn(data.productData)
    return (
      <div className='shop'>
        <h1 className="text-center">All products</h1>
        <div className="row">
          <div className="col-md-10 col-12">
        <section className="mx-4 py-4">
          <div className="row align-items-center justify-content-center">
            {data.productData.map((product, index) =>{
              return(
                <ProductCard addToCard={addToCart} image={product.image} name={product.name} desc={product.desc} price={product.price} key={index} />
              )
            })}
             
          </div>

        </section>
        </div>
        <div className="col-2">
          <div className="container product-aside d-none d-sm-block py-4">Blah blah Blah . . ./div>
        </div>
        </div>
      </div>
    )
}
const mapStateToProps = state =>{
  return{
    products: state.cart.products,
  }
}
export default connect(mapStateToProps) (ProductList)

我在 redux 商店中有以下內容

//REDUX
cart-action.js
export const addToCart = (product_id) =>{
    console.log(product_id)
    return{
        type: ADD_TO_CART,
        payload:{
           id: product_id,
        }
        
    }
    
}

cart-reducer.js
const initialState = {
    products: [],
    cart: [],
    currentItem: null
  };

    const cartReducer = (state = initialState, action) =>{
        switch(action.type){
            case ADD_TO_CART:
                const item = state.products.find(product => product.id === action.payload.id);
                const inCart = state.cart.find(item => item.id ===action.payload.id ? true: false);

                return{
                    ...state,
                    cart: inCart ? state.cart.map(item => item.id ===action.payload.id ? {...item, qty: item.qty   1} : item) : [...state, {...item, qty: 1}]
                }
    default:
            return state;
        }
    }
export default cartReducer

我得到的錯誤是：

TypeError: addToCart is not a function onClick

請我需要一些幫助來解決這個問題。我一直在嘗試修復它，但我不斷遇到一個又一個問題

uj5u.com熱心網友回復：

看起來 addToCart 無法識別 為什么不像這樣在道具上傳遞 addToCart 函式

<ProductCard addCart={addToCart}>

uj5u.com熱心網友回復：

我不知道你為什么在 ProductCard 函式中將 addToCart 作為 ProductCard(props, {addToCart}) 傳遞。您可以直接呼叫 addToCart 操作 onClick 事件，而不是使用 dispatch() 方法。請試試這個解決方案，讓我知道它是否有效

    import addToCart from './cart-action.js'


    export default function ProductCard(props) {
        return (
            <div className="product-card col-sm-12 col-md-4 col-lg-3 pb-5">
                <div className="col-md-12 product overflow-hidden h-100 shadow-lg">
                    <img className="product-img card-img-top img-fluid" src={props.image} alt="product" />
                    <div className="text-center">
                    <div>{props.name}</div>
                    <div> {props.id} </div>
                    <div> {props.desc} </div>
                   
                    <div>#{props.price} </div>
                    <button className="btn btn-success mb-2" onClick={() => dispatch(addToCart(props.id))}>Add to Cart</button>
                    </div>
                </div>
            </div>
        )
    }

這是一個簡單的例子

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

標籤：javascript 反应 反应还原

上一篇：僅在頂層計算div容器中的特定元素

下一篇：如何將url中的多行附加到串列中？