Estoy usando Context API para manejar la autenticación de usuario.
Hay algo raro porque tengo una variable admin que si tiene valor en el componente UserContext, pero cuando la llevo al App y la recibe como undefined. Imprimí por consola y desde UserContext.js, aparece el string Admin. Pero cuando lo envío a App, este pasa a ser undefined.
Así muestra consola:
El código completo del componente UserContext es:
import { createContext, useState } from "react";
import Swal from "sweetalert2";
export const UserContext = createContext({});
const UserProvider = ({ children }) => {
const [logged, setLogged] = useState(false);
const [admin, setAdmin] = useState();
const [user, setUser] = useState();
const userStorage = localStorage.getItem("userInfo");
const login = (data) => {
setUser(data);
setLogged(true);
console.log(data.role);
checkRole(data.role);
};
const logout = () => {
localStorage.removeItem("userInfo");
setUser(null);
setAdmin(false);
Swal.fire("User session closed", "", "success");
};
const checkUser = () => {
if (userStorage) {
setLogged(true);
console.log("There is a user logged in");
} else {
console.log("No user logged in");
}
};
const checkRole = (user) => {
if (user) {
if (user === "Admin") {
setAdmin(user);
console.log("Is admin user");
} else {
console.log("Is regular user");
}
} else {
console.log("I can't check the role");
}
};
console.log(admin);
return (
<div>
<UserContext.Provider
value={{ checkUser, user, admin, login, logged, setLogged, logout }}
>
{children}
</UserContext.Provider>
</div>
);
};
export default UserProvider;
Y el de App.js:
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import "./App.css";
import Navbar from "./components/common/Navbar";
import Home from "./components/Home";
import SignUp from "./components/SignUp";
import Login from "./components/Login";
import Footer from "./components/common/Footer";
import Details from "./components/Details";
import Dashboard from "./Pages/Dashboard/Dashboard";
import { useState, useEffect, useContext } from "react";
import Error404 from "./components/Error404";
import UserProvider, { UserContext } from "./Context/UserContext";
function App() {
const [movies, setMovies] = useState();
const { admin } = useContext(UserContext);
const consultMovies = async () => {
await fetch(process.env.REACT_APP_API_MOVIES)
.then((response) => response.json())
.then((data) => setMovies(data));
};
useEffect(() => {
consultMovies();
}, []);
console.log({ admin });
return (
<div>
<UserProvider>
<BrowserRouter>
<Navbar></Navbar>
<Switch>
<Route exact path="/">
<Home movies={movies} />
</Route>
<Route exact path="/login">
<Login />
</Route>
<Route exact path="/signup">
<SignUp />
</Route>
<Route exact path="/details/:id">
<Details />
</Route>
{/* <Route
exact
path="/dashboard"
render={() => {
return admin === "Admin" ? (
<Dashboard consultMovies={consultMovies} movies={movies} />
) : (
<Redirect to="/"></Redirect>
);
}}
></Route> */}
<Route exact path="/dashboard">
<Dashboard consultMovies={consultMovies} movies={movies} />
</Route>
<Route path="*">
<Error404 />
</Route>
</Switch>
<Footer />
</BrowserRouter>
</UserProvider>
</div>
);
}
export default App;
Alguien sabe por qué podrá ser que el valor está llegando como undefined al App? Desde ya muchas gracias
UserContext
, saludosApp
, tantoUserContext
comoUserProvider
; Ahora, hay un detalle con elimport
deUserContext
, pero antes ¿Estas usando elUserProvider
enApp
? y de ser así ¿Cómo lo estas usando? Si pudieras subir esa pieza de código también, Saludos