Así que estoy tratando de aprender a usar el contexto, ya que estoy creando una aplicación de citas para perros solo como un proyecto divertido y tendré que pasar al usuario actual por toda la aplicación.
Aunque parece que no entiendo cómo usar el contexto con mecanografiado. Tengo un componente llamado HomeView y me gustaría ver el contador y posiblemente configurar el contador con la función usestate setCounter.
Cuando trato de registrar el contador en mis componentes HomeView, todo lo que obtengo es indefinido, aunque el valor esté establecido en 0. Debería poder iniciar sesión en 0 en la pantalla de mi consumidor. ¿Qué me estoy perdiendo?
Contexto.tsx
import { createContext, useState } from 'react'; type ContextType = { setCounter: React.Dispatch<React.SetStateAction<number>>; counter: number; }; export const CounterContext = createContext<ContextType>({} as ContextType); export const CounterContextProvider: React.FC = ({ children }) => { const [counter, setCounter] = useState(0); return <CounterContext.Provider value={{ counter, setCounter }}>{children}</CounterContext.Provider>; };HomeView.tsx
export const HomeView = () => { const context = useContext(CounterContext); console.log(context.counter); // value is undefined return ( <div className='signInWrapper'> <SignIn /> <CounterContextProvider> {context.counter} // Nothing is shown onto the screen </CounterContextProvider> </div> ); };Dado que está recuperando el contexto en un componente que no está anidado en el CounterContext.Provider , se está volviendo undefined .
Debe anidar toda su aplicación en CounterContextProvider para acceder al estado globalmente.
Puede hacer esto en su archivo App.js :
function App() { return ( <CounterContextProvider> ... <HomeView/> </CounterContextProvider> Después de esto, debería poder acceder al contexto en su componente HomeView :
export const HomeView = () => { const { counter, setCounter } = useContext(CounterContext); return ( <div className='signInWrapper'> <SignIn /> Your counter value is: {counter} </div> ); };