1

Buen dia!

Estoy desarrollando mi primera aplicación con React JS. Estoy teniendo problemas para actualizar un estado que declaro en un contexto, siendo sincero aun no estoy muy familiarizado con como funciona un contexto. Mi contexto es el siguiente:

import{createContext, useState} from 'react'
export const AuthContext = createContext();

const AuthProvider = ({children}) => {
    let [user, setUser] = useState(null)
    const contextValue = {
        user,
        login(userName, password){
            if(userName === "johnatan" && password === "vizard"){
                setUser({"id":1, "userName": "Johnatan"})
                
            }
        },
        logout(){
            setUser(null)
        },
        isLogged(){
            return !!user
            //return !Object.keys(user).length === 0
        }
    }
    return(
        <AuthContext.Provider value ={contextValue}>
            {children}
        </AuthContext.Provider>
    )
}
export default AuthProvider;

Tambien cree un hook para poder acceder a dicho contexto. El hook es el siguiente:

import {useContext} from 'react'
import { AuthContext } from './AuthProvider'


export default function UseAuth(){
    return useContext(AuthContext)
}

Estoy trabajando con estos componentes en una función dentro de mi pagina de login que mando a llamar cuando el boton de ingresar es presionado, continuación dicha función:

  const classes = useStyles();
  const auth = UseAuth()
  const history = useHistory();
  const [form, setForm] = useState({})
  function handleLogin(e){ //HANDLE LOGIN
    e.preventDefault()
    auth.login(form.user, form.password)
    let booleano = auth.isLogged()
    if(auth.isLogged()){
       history.push("/home")
    }
  }

Mi problema es que cuando mando a llamar la funcion login que esta en mi contexto el state user no es actuaizado en el momento si no hasta que realizo una segunda llamada el metodo.

Investigando en internet encontre que useState es una funcion asincrona es por eso que el cambio en el estado no se ve reflejado de inmediato.

mi pregunta es ¿De que manera podria aolucionar este retardo?

1 respuesta 1

1

Una cosa que puedes hacer es escuchar con un useEffect y esperara a que login cambie:

  const classes = useStyles();
  const auth = UseAuth()
  const history = useHistory();
  const [form, setForm] = useState({})

  function handleLogin(e){ //HANDLE LOGIN
    e.preventDefault()
    auth.login(form.user, form.password)
  }

  React.useEffect(() => {
    let booleano = auth.isLogged()
    if(auth.isLogged()){
       history.push("/home")
    }
  }, [auth.user]);

2
  • Si quieres ver más casos e info sobre como funciona useState, aquí van una serie de videos: lemoncode.tv/curso/react-use-state
    – Braulio
    Commented el 23 may. 2021 a las 10:43
  • Muchas Gracias por tu aportacion @Braulio,, probare si funciona. Saludos! Commented el 23 may. 2021 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.