cuando intento configurar el estado userHasAuthenticated en la función de inicio de sesión con true, ¿devuelve false en console.log(isAuthenticated) (sigue igual en App.js 'false')?
y quiero usarlo en Home Component el mismo problema 'falso';
//----------------------in App.js---------------------- var [isAuthenticated, userHasAuthenticated] = useState('false'); <AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}> //... </AppContext.Provider> //-------------- in Login.js--------------------- const { isAuthenticated,userHasAuthenticated } = useAppContext(); const login = () => { userHasAuthenticated('true'); console.log(isAuthenticated); // false ? window.location.assign("/Home"); } // ---------------------in Home.js------------------------ const { isAuthenticated,userHasAuthenticated } = useAppContext(); console.log(isAuthenticated);// --->false ? //-------------- in context.js--------------------- export const AppContext = createContext(null); export function useAppContext() { return useContext(AppContext); }En su mayor parte, este código parece correcto, lo único que está mal aquí por lo que puedo decir es que está intentando consolar. isAuthenticated console.log después de configurarlo. Esto no funcionará porque la configuración de estado es asíncrona, lo que significa que no puede esperar que se actualice de inmediato.
Podrías probar esto para ver si el estado cambia:
//-------------- in Login.js--------------------- const { isAuthenticated, userHasAuthenticated } = useAppContext(); useEffect(() => { console.log(isAuthenticated); // this should be "true" after `login` has run }, [isAuthenticated]); const login = () => { userHasAuthenticated('true'); console.log(isAuthenticated); // this should be "false" window.location.assign("/Home"); }recuerde que sus datos de su Contexto están en MEMORIA, cada vez que actualice su Aplicación, App.js será llamado y renderizado nuevamente, por lo que llamará a su contexto y se creará una vez más como falso. Es por eso que está obteniendo 'FALSO' cuando llama isAuthenticated excepto en la página de inicio de sesión
Es mejor que guarde sus datos en el almacenamiento local y los obtenga desde allí cada vez que actualice o navegue por su aplicación, y eso mantendrá toda la información guardada en su gancho useAppContext().
Aplicación.js:
const [isAuthenticated, userHasAuthenticated] = useState(localStorage.getItem('user') || 'false');Prueba esto en tu Login.js:
export const Login = (props) => { const {isAuthenticated, userHasAuthenticated} = useAppContext(); useEffect(() => { userHasAuthenticated('true'); localStorage.setItem('user', 'true'); // set user to authenticated }, []); return ( <> <h1>isAuthenticated = {isAuthenticated}</h1> </> );};
Y luego obtenga los datos de su useAppContext():
export const Home = (props) => { const { isAuthenticated } = useAppContext(); return ( <> <h1>isAuthenticated = {isAuthenticated}</h1> </> );};
Resultado:
