Estoy trabajando en el proyecto básico Food Order con React.js. Para evitar la perforación de accesorios, quiero usar el contexto, pero me encuentro con un error. Hay valores predeterminados en mi contexto (artículos, cantidad, etc.), y cuando hago console.log(ctx.item) en el componente Cart, veo que se muestra indefinido, sin embargo, tiene que devolver una matriz vacía. Este es mi context.js:

 import React from 'react'; const cartContext = React.createContext({ items: [], totalQuantity: 0, addItem: (item) => {}, removeItem: (item) => {} }) export default cartContext;

Y este es el proveedor de contexto aquí:

 import cartContext from "./cartContext"; export default function CartProvider (props) { const cartContextData = { items: [], totalQuantity: 0, addItem: (item) => {}, removeItem: (id) => {} } return ( <cartContext.Provider value={cartContext}> {props.children} </cartContext.Provider> ) }

Yo uso proveedor de contexto en app.js

 import './App.css'; import Header from './Components/Header/Header' import React, { useState } from 'react'; import cartContext from './Storage/cartContext'; import Meals from './Components/Meals/Meals'; import data from './Storage/data.js'; import CartItems from './Components/Header/Cart/CartItems'; import CartProvider from './Storage/CartProvider'; function App() { const [isCartDisplayed, setCardDisplay] = useState(false) const displayCartFunction = () => { setCardDisplay(prevState => prevState ? false : true); } return ( <CartProvider> {isCartDisplayed && <CartItems displayCartFunction={displayCartFunction}></CartItems>} <Header displayCartFunction={displayCartFunction}></Header> <Meals data={data}></Meals> </CartProvider> ); } export default App;

Y aquí es donde me enfrento con un error indefinido cuando imprimo ctx.item:

 import React, { useContext, Fragment } from 'react'; import cartContext from '../../../Storage/cartContext'; import './Cart.css' import CartIcon from './CartIcon'; import CartItems from './CartItems'; function Cart(props) { const ctx = useContext(cartContext); console.log(ctx.items) return ( <Fragment> <button onClick={props.displayCartFunction} className='card-button'> <CartIcon /> &nbsp; <span>Your Card</span> &nbsp; <span className='card-badge'>0</span> </button> </Fragment> ) } export default Cart;

Cuál sería el problema ?