Unturect typeError：AddItem不是OnClick的功能（itemcard.js：16：1）

Question

这是我每次尝试在购物车中添加一些东西的错误。

Unturect typeError：AddItem不是OnClick（ItemCard.js：16：1）的功能。

我无法弄清楚我在做什么错。我是新手做出反应的新手，因此将不胜感激。

这是我的itemcard.js

import {useCart} from 'react-use-cart'

const ItemCard = (props) => {
const {addItem}=useCart();

 return (
   <div className='col-11 col-md-6 col-lg-3 mx-0 mb-4'>
   <div class="card p-0 overflow-hidden h-100 shadow" >
       <img src={props.img} class="card-img-top img-fluid" alt=""/>
       <div class="card-body text-center">
           <h5 class="card-title">{props.title}</h5>
           <h5 class="card-title">${props.price}</h5>
           <p class="card-text">{props.desc}</p>
           <buttton class="btn btn-success"
            onClick={()=>addItem(props.item)}
            >Add to Cart</buttton>
       </div>
   </div>
   </div>
 )
}

export default ItemCard```

这是我的购物车。

import React from 'react'
import { useCart } from 'react-use-cart'
import ItemCard from './ItemCard';

const Cart = () => {

const {
    isEmpty,
    totalUniqueItems,
    totalItems,
    items,
    cartTotal,
    updateItemQuantity,
    removeItem,
    emptyCart,
    }=useCart();
    if(isEmpty) return <h1 className='text-center'>Your Cart is Empty</h1>

  return (
      <section className='py-4 container'>
        <div className='row justify-content-center'>
            <div className='col-12'>
                <h5>Cart ({totalUniqueItems}) total Items:({totalItems})</h5>
                <table className='table table-light table-hover m-0'>
                    <tbody>
                    {items.map((item,index)=>{
                        return(
                            <tr key={index}>
                                <td>
                                    <img src={item.img} style={{height:'6rem'}}/>
                                </td>
                                <td>{item.title}</td>
                                <td>{item.price}</td>
                                <td>Quantity ({item.quantity})</td>
                                <td>
                                    <button className='btn btn-info ms-2'
                                     onClick={()=>updateItemQuantity(item.id, item.quantity - 1)}
                                    >-</button>
                                    <button className='btn btn-info ms-2'
                                    onClick={()=>updateItemQuantity(item.id, item.quantity + 1)}
                                    >+</button>
                                    <button className='btn btn-danger ms-2'>Remove Item</button>
                                </td>

                            </tr>
                        )
                    })}
                    </tbody>
                </table>
            </div>
        
        </div>
    </section>
  )
}

export default Cart```

这是我的app.js

import './App.css';
import Header from './Header'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Login from './Login'
import Home from './Home';
import Checkout from './Checkout';
import Footer from './Footer';
import Navlinks from './Navlinks';
import Cart from './Cart';



function App() {
  return (
<Router>

      <div className="App">
        <Switch>
          <Route path="/checkout">
            <Header/>
            <Checkout/>
          </Route>

          <Route path="/login">
            <Login/>
          </Route>

          <Route path="/">
            <Header/>
            <Navlinks/>
            <cartProvider>
            <Home/>
            <Cart/>
            </cartProvider>
            <Footer/>

          </Route>

        </Switch>
    
      </div>
      </Router>
  );
}

export default App;```

这是我的data.js

const data = {
    productData:[
        {
            id:1,
            img: vase,
            title:'Porcilane flower vase',
            desc: '',
            price: 46,
        },
        {
            id:1,
            img: vase,
            title:'Porcilane flower vase',
            desc: '',
            price: 46,
        },
        {
            id:1,
            img: vase,
            title:'Porcilane flower vase',
            desc: '',
            price: 46,
        },
        {
            id:1,
            img: vase,
            title:'Porcilane flower vase',
            desc: '',
            price: 46,
        },
    ],
};

export default data;```

Answer 1

在app.js中添加

import {cartProvider}来自'react-use-cart';

并扭曲所有内容

<CartProvider> <CartProvider/>

：

import { CartProvider } from 'react-use-cart';
import './App.css'
import ListContainer from "./component/ListContainer";

function App() {
  return (
    <>
    <CartProvider>
      <ListContainer/>
    </CartProvider>
    </>
  );
}

export default App;