按鈕不起作用UncaughtTyperError:onUpdateCartQtyisnotafunction

我正在構建一個電子商務應用程式，由于某種原因，我更新購物車的按鈕不起作用。我正在使用道具，當我轉到控制臺日志時，它說 onUpdateCartQty 不是一個函式。我知道道具有點棘手。

有人可以指出我做錯了什么嗎？

CartItem.jsx

import React from 'react';
import { Typography, Button, Card, CardActions, CardContent, CardMedia } from '@material-ui/core';

import useStyles from './styles';

const CartItem = ({ item, onUpdateCartQty, onRemoveFromCart }) => {
const classes = useStyles();

return (
  //product.image.url?
<Card>
    <CardMedia image={item.image.url} alt={item.name} className={classes.media} />
    <CardContent className={classes.cardContent}>
        <Typography variant="h4">{item.name}</Typography>
        <Typography variant="h5">{item.line_total.formatted_with_symbol}</Typography>

    </CardContent>
    <CardActions className={classes.cardActions}>
        <div className={classes.buttons}>
                <Button type="button" size= "small" onClick={() =>  onUpdateCartQty(item.id, item.quantity - 1)}>-</Button>
                <Typography>{item.quantity}</Typography>
                <Button type="button" size= "small" onClick={() =>  onUpdateCartQty(item.id, item.quantity   1)}> </Button>
        </div>
        <Button variant="contained" type= "button" color="secondary" onClick={() => onRemoveFromCart(item.id) }>Remove</Button>

    </CardActions >
</Card>

)
}

export default CartItem

應用程式.js

import React, { useState, useEffect } from "react";
import { commerce } from './lib/commerce';
import { Products, Navbar, Cart } from './components';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";




const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState({});

const fetchProducts = async () => {
  const { data } = await commerce.products.list();

  setProducts(data);

}

const fetchCart = async () => {
  setCart(await commerce.cart.retrieve())
}

const handleAddToCart = async (productId, quantity) => {
  const { cart } = await commerce.cart.add(productId, quantity);

  setCart(cart);
}

const handleUpdateCartQty = async (productId, quantity) => {
const { cart } = await commerce.cart.update(productId, { quantity});

setCart(cart);

}

const handleEmptyCart = async () => {
  const { cart } = await commerce.cart.empty();

  setCart(cart);
}

const handleRemoveFromCart = async (productId) => {
  const { cart } = await commerce.cart.remove(productId);

  setCart(cart);
}

  useEffect(() =>{
  fetchProducts();
  fetchCart();
}, []);

console.log(cart);


 return (
 <Router>
 <div>
  <Navbar totalItems={cart.total_items} />
  <Routes>
    <Route path= "/" element={<Products products = {products} onAddToCart= 
    {handleAddToCart}/>}/>
    {/* <Products  products={products} onAddToCart={handleAddToCart} /> */}
    {/* </Route> */}

    <Route path= "/cart" element= {<Cart cart={cart}/>}
    handleUpdateCartQty ={handleUpdateCartQty}
    handleRemoveFromCart ={handleRemoveFromCart}
    handleEmptyCart ={handleEmptyCart}
    />
    {/* <Cart cart={cart} /> */}
    {/* </Route> */}
      
      
  </Routes>
</div>
</Router>
);
};

export default App;

在此處輸入影像描述

uj5u.com熱心網友回復：

目前，您將道具傳遞給 Route 組件而不是 CartItem 組件。

 <Route path= "/cart" element= {<Cart cart={cart}/>}
handleUpdateCartQty ={handleUpdateCartQty}
handleRemoveFromCart ={handleRemoveFromCart}
handleEmptyCart ={handleEmptyCart}
/>

嘗試發送為

 <Route path= "/cart" element= {<Cart cart={cart}
handleUpdateCartQty ={handleUpdateCartQty}
handleRemoveFromCart ={handleRemoveFromCart}
handleEmptyCart ={handleEmptyCart}
/>} />

uj5u.com熱心網友回復：

這是整個解決方案嗎？我看不到 CartItem 的使用位置。我假設它在 Cart 組件中使用？

標籤：javascript 反应 反应钩子 反应道具

上一篇：mongodb從id陣列中過濾檔案

下一篇：如何在我的html代碼中獲取API和顯示資料？