1

nuevamente vuelvo a acudir a ustedes! Estoy teniendo unas dudas en cuenta el uso y manejo de useState.

En el siguiente ejemplo tengo un componente que lo que hace es tomar un token que viene del back y mediante una funcion lo autoriza y lo deriva al perfil que sea correspondiente segun el estado de ese usuario, mediante una funcion.

import React, { useEffect, useState } from 'react';
import Loading from './../common/Loading';
import { useHistory } from 'react-router-dom';
import API from './../../api';
import PerfilAdmin from './PerfilAdmin';
import {accesNot} from './../../services/useSweetAlert';

const Perfiles = ( props ) => {
 
    const routerHistory = useHistory();
    const [jwtverify,setJwt] = useState();
    const [isFetching,setFetching] = useState(true);

    useEffect(()=>{
        const verifytoken  = async (e)=>{
                try {  
                    const token = sessionStorage.getItem('JWT');
                    const result = await API.get(`auth/authuser/${token}`);
                    setFetching(false)
                    setJwt({...jwtverify,result})
                    //setJwt(result);
                    
                    if(result.data.datosUsers.estado === 1){
                        routerHistory.push("/perfil/perfiladmin")
                        console.log("STATE JWTVERIFY",jwtverify)
                        }   
                      else{
                        accesNot();
                        routerHistory.push('/login')
    
                    }
                } catch (error) {
                    console.error()
                }
        }
        
        verifytoken();
        

    },[]);
    
   
   
   

    
    
    return (<>
        {isFetching && <Loading />}
        {<PerfilAdmin usuarios={jwtverify} />}
       
    </>
        )
    }
 
export default Perfiles;

Como decia, esta pagina renderiza solo en un spiner de carga, lo unico que hace es verificar que usuario llega y derivarlo segun corresponda. Lo que me pasa es que quiero setear el estado -->

const [jwtverify,setJwt] = useState();
                 

/////////////

 const token = sessionStorage.getItem('JWT');
 const result = await API.get(`auth/authuser/${token}`);
 setFetching(false)
 setJwt({...jwtverify,result})
 //setJwt(result);

La variable result llega perfecto un object con todos los datos del usuario, y yo necesito setear sl setJwt con esa informacion. cuando hago esa carga, por la consola sale ----> undefined Ya probe de varias forma y no estaria encontrando el error de porque no se me setea ese estado. Muchas gracias y un saludo!!

2
  • ¿Cuál es el console.log() que te dice que el estado jwtverify está undefined? ¿Este console.log("STATE JWTVERIFY",jwtverify)? Commented el 19 may. 2021 a las 3:28
  • Si, ese console.log es el que me tira el UNDEFINED. Gracias un abrazo1 Commented el 20 may. 2021 a las 2:38

1 respuesta 1

0

No hay que olvidar que toda esa lógica la estás ejecutando dentro del useEffect(), que en este caso solo se está ejecutando la primera vez en la que se renderiza el componente.

Y como es la primera vez que se renderiza el componente, el estado jwtverify está undefined porque no le estás asginando un valor inicial en el useState(). Entonces es lógico que al querer examinar su valor en el console.log("STATE JWTVERIFY",jwtverify) este siga siendo undefined.

Eso es porque ese console.log("STATE JWTVERIFY",jwtverify) te está mostrando el valor del estado antes de ser seteado. Pero eso no necesariamente quiere decir que no te esté seteando el estado correctamente cuando haces el setJwt({...jwtverify,result}).

Entonces, yo te recomendaría que verifiques el valor del estado jwtverify mediante el console.log("STATE JWTVERIFY",jwtverify) en otra parte del componente para ver si el problema es realmente ese.

Por ejemplo, podrías ponerlo entre el useEffect() y el return así:

import React, { useEffect, useState } from 'react';
import Loading from './../common/Loading';
import { useHistory } from 'react-router-dom';
import API from './../../api';
import PerfilAdmin from './PerfilAdmin';
import {accesNot} from './../../services/useSweetAlert';

const Perfiles = ( props ) => {

const routerHistory = useHistory();
const [jwtverify,setJwt] = useState();
const [isFetching,setFetching] = useState(true);

useEffect(()=>{
    const verifytoken  = async (e)=>{
            try {  
                const token = sessionStorage.getItem('JWT');
                const result = await API.get(`auth/authuser/${token}`);
                setFetching(false)
                setJwt({...jwtverify,result})
                //setJwt(result);
                
                if(result.data.datosUsers.estado === 1){
                    routerHistory.push("/perfil/perfiladmin")
                    /*console.log("STATE JWTVERIFY",jwtverify)*/
                    }   
                  else{
                    accesNot();
                    routerHistory.push('/login')

                }
            } catch (error) {
                console.error()
            }
    }
    
    verifytoken();
    

},[]);
   
console.log("STATE JWTVERIFY",jwtverify)//<-- aquí debería mostrar el valor ya actualizado

return (<>
    {isFetching && <Loading />}
    {<PerfilAdmin usuarios={jwtverify} />}
   
</>
    )
}

export default Perfiles;

Harías eso solo para verificar si realmente se está seteando o no el estado correctamente.

Ya que hacer esa verificación dentro del useEffect(), como expliqué anteriormente, no tendría mucho sentido.

3
  • 2
    El hook useEffect no se ejecuta junto al componente, el mismo se ejecuta después de que el componente se haya renderizado, el hook useEffect le dice a React que su componente necesita hacer algo después del render, react recordará la función que pasó (nos referiremos a ella como nuestro "efecto"), y la llamará más tarde después de realizar las actualizaciones DOM.
    – Enzo
    Commented el 20 may. 2021 a las 4:07
  • 2
    Está bien, no es una mala aclaración. Pero la clave de este caso es saber que si consultas el valor de un estado mediante un console.log() dentro de un useEffect() como este, te va a mostrar el valor inicial del estado y no su valor actualizado. Y eso pasa independientemente del momento exacto en el que se ejecute este useEffect(). Commented el 20 may. 2021 a las 4:25
  • 1
    Buenas colegas, efectivamente, el console.log() tenia que ir fuera del useEffect() para ver los valores que tenia el STATE. y pude pasarlo mediante props, gracias por la ayuda soy principiante y estos errores basicos se me pasan! saludos!! Commented el 21 may. 2021 a las 23:00

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.