所以我试图在我的项目中使用上下文 api 但是我的代码中提到了一些问题告诉我如何解决它

Question

在 index.js 中，我已经导入了 CartContext 并使用它是否正确或不告诉我。 此外，在使用上下文 api 和 usecontext 之前，代码运行良好，因此 router-dom 工作正常。 所以我试图建立一个电子商务网站，当您点击添加购物车时，购物车将得到更新，并且还具有添加的项目的价值

index.js

            import React from 'react';
            import ReactDOM from 'react-dom/client';
            import './index.css';
            import App from './App';
            import 'bootstrap/dist/css/bootstrap.min.css';
            import CartContext from './CartContext';
            
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(
              <React.StrictMode>
              <CartContext>
              <App />
              </CartContext>
              </React.StrictMode>
            );
          
      
          

应用程序.js

            import './App.css';
            import Sidebar from './componenet/sidebars';
            import Cart from './cart';
            import Header from './componenet/header';
            import {BrowserRouter, Route,Routes } from 'react-router-dom'
            import Home from './componenet/home'
            import Error from './componenet/Error';
            function App() {
              return (
            <>
               <BrowserRouter>
                <Header />
                <Sidebar />
                  <div>
                  <Routes>
                    <Route path='/' exact  element={<Home />}/>
                    <Route path='Cart' exact  element={<Cart />}/>
                    <Route path='*' element={< Error/>}/>
                  </Routes>
                  </div>
                  </BrowserRouter>
                  </>
              );
            }
            
            export default App;
            
    
    
    

CartContext.js

            import {useContext, createContext, useState} from 'react'
              
            const Cart =createContext()
            
            const CartContext = ({children}) => {
            const [ addcart, setAddCart] = useState(0)
              return (
                <Cart.Provider value ={{ addcart, setAddCart }}> {children} </Cart.Provider>
              )
            }
            
            export default CartContext
            
            export const CartState = ()=>{
             return useContext(Cart)
            }
            
    
    
            

主页.js

            import React from "react"
            import  Data  from "../data.json"
            import { AiFillStar } from 'react-icons/ai';
            import Button from 'react-bootstrap/Button';
            import {CartState} from "../CartContext";
            
            
            const Home = () => {
            const { addcart, setAddCart } = CartState()
              return(
              <div className="productshowcase"> 
               {Data.map((elm)=>{
              return( 
              <div className ="product" key= {elm.id}>
                  <img src={elm.image} alt="" />
                  <ul className="prodesc">
                  <li>Cat-{elm.category}</li>
                  <li>{elm.name}</li> 
                  <li className="price">{elm.price}</li>
                  <li className="addbtn" onClick={()=>setAddCart(()=> addcart + 1) }>
                   Add to Cart</li>
                  </ul>
                  
              </div>
                )}   
                )}
                </div>
              )
            }
            
            export default Home;
        

header.js

import React from "react"
import  Data  from "../data.json"
import { AiFillStar } from 'react-icons/ai';
import Button from 'react-bootstrap/Button';
import {CartState} from "../CartContext";


const Home = () => {
const { addcart, setAddCart } = CartState()
  return(
  <div className="productshowcase"> 
   {Data.map((elm)=>{
  return( 
  <div className ="product" key= {elm.id}>
      <img src={elm.image} alt="" />
      <ul className="prodesc">
      <li>Cat-{elm.category}</li>
      <li>{elm.name}</li> 
      <li className="price">{elm.price}</li>
      <li className="addbtn" onClick={()=>setAddCart(()=> addcart + 1) }>Add to Cart</li>
      </ul>
      
  </div>
    )}   
    )}
    </div>
  )
}

export default Home;
        
        


        
    
**Error occurring in browser is given as following**
    
        
        CartContext.js:6 Uncaught TypeError: Cannot destructure property 'children' of '_ref' as it is undefined.
            at CartContext (CartContext.js:6:1)
            at Header (header.js:9:1)
            at renderWithHooks (react-dom.development.js:16305:1)
            at mountIndeterminateComponent (react-dom.development.js:20074:1)
            at beginWork (react-dom.development.js:21587:1)
            at beginWork$1 (react-dom.development.js:27426:1)
            at performUnitOfWork (react-dom.development.js:26557:1)
            at workLoopSync (react-dom.development.js:26466:1)
            at renderRootSync (react-dom.development.js:26434:1)
            at recoverFromConcurrentError (react-dom.development.js:25850:1)
        CartContext @ CartContext.js:6
        Header @ header.js:9
        renderWithHooks @ react-dom.development.js:16305
        mountIndeterminateComponent @ react-dom.development.js:20074
        beginWork @ react-dom.development.js:21587
        beginWork$1 @ react-dom.development.js:27426
        performUnitOfWork @ react-dom.development.js:26557
        workLoopSync @ react-dom.development.js:26466
        renderRootSync @ react-dom.development.js:26434
        recoverFromConcurrentError @ react-dom.development.js:25850
        performConcurrentWorkOnRoot @ react-dom.development.js:25750
        workLoop @ scheduler.development.js:266
        flushWork @ scheduler.development.js:239
        performWorkUntilDeadline @ scheduler.development.js:533