Estoy tratando de compartir un servicio de algún tipo con un componente que está anidado dentro de otro, pero recibo un error indefinido.
'UserContext' no está definido no undef
Esta es mi aplicación.js:
import logo from './logo.svg'; import './App.css'; import React, {createContext} from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import TopPanel from "./components/topPanel/TopPanel"; import UserCtx from "./services/UserCtx"; function App() { const UserContext = createContext({}); return ( <Router> <UserContext.Provider value={new UserCtx()}> <TopPanel/> </UserContext.Provider> <Routes> ... </Routes> </Router> ); } export default App; Dentro del componente TopPanel hay un componente de inicio de Login , que debería consumir el contexto:
import React, {useState, useContext} from "react"; function Login() { const userCtx = useContext(UserContext); ... } export default Login;Pero aparentemente no se transmite. ¿Qué estoy haciendo mal, por favor? Ni siquiera parece que se haya pasado al componente de primer nivel.
No creo que sea relevante, pero aquí está el objeto de contexto:
import React from "react"; class UserCtx { isLoggedIn; token; constructor() { this.isLoggedIn = false; } logIn = (token) => { console.log("LOGGING IN!"); this.isLoggedIn = true; this.token = token; } } export default UserCtx;La creación del contexto debe estar fuera del componente, esta línea const UserContext = createContext({}); debe estar fuera del componente de la App y debe exportarse:
export const UserContext = createContext({}); Asegúrese de que dentro de Login importe UserContext en la parte superior, antes de hacer lo que tiene allí:
import React, {useState, useContext} from "react"; import {UserContext} from "../../App"; // use the correct path function Login() { const userCtx = useContext(UserContext); ... } export default Login;Piense en el objeto UserContext como una caja exterior que se puede montar en cualquier otro objeto (componentes) en los objetos de estructura de árbol de reaccionar. Debe declarar el objeto de contexto fuera de su componente de aplicación.