Estoy tratando de tomar datos de un servidor, toma datos, pero no muestra datos en la página hasta que el componente llama a componentDidUpdate() , pero con la segunda función funciona. Creo que el componente de montaje antes de la toma de datos, traté de usar 'uselayouteffect' pero no resolvió el problema, al usar console.log, entendí que el problema en mis funciones asíncronas, pero las funciones son las mismo (me refiero a la estructura).
usarEfecto: `
useEffect( () => { console.log('ProfileUseEffect') getUserInfo().then( (response) => { console.log(response) }).catch((error) => { console.log(error) }) loadAllSessions().then( (response) => { console.log(response) }).catch((error) => { console.log(error) }) }, [])`
función que no funciona correctamente:
const getUserInfo = async () => { console.log('ThisShitGonnaWork') const requestData = { "client": requestClient, "key": requestKey, "data":{ "action":"getInfo", "token": accessTokenCookie['access_token'], } } try{ const response = await axios.post( backendUrl + 'user' , requestData ) setUserAccountInfo(response?.data?.message) typeof userAccountInfo.userlogin !== 'undefined' && setUserLogin(userAccountInfo.userlogin) typeof userAccountInfo.username !== 'undefined' && setUserName(userAccountInfo.username) typeof userAccountInfo.userrole !== 'undefined' && setUserRole(userAccountInfo.userrole) }catch (err){ console.log(err) } }función que funciona correctamente:
const loadAllSessions = async () => { const requestData = { "client": requestClient, "key": requestKey, "data":{ "action":"getActiveSessions", "token": accessTokenCookie['access_token'], } } try{ const response = await axios.post( backendUrl + 'user', requestData ) response?.data?.message?.activeSessions.forEach( (elem , idx ) => { updateUserSessionsMap(idx , elem) }) }catch (err){ console.log(err) } }He estado sentado aquí durante casi una semana y me he estado rascando la cabeza con este problema, estaría agradecido si pudiera ayudarme.
No funciona debido a esta parte:
try{ const response = await axios.post( backendUrl + 'user' , requestData ) setUserAccountInfo(response?.data?.message) typeof userAccountInfo.userlogin !== 'undefined' && setUserLogin(userAccountInfo.userlogin) typeof userAccountInfo.username !== 'undefined' && setUserName(userAccountInfo.username) typeof userAccountInfo.userrole !== 'undefined' && setUserRole(userAccountInfo.userrole) }catch (err){ console.log(err) } Está haciendo setUserAccountInfo y luego espera en la siguiente línea que accederá a ese nuevo estado al inspeccionar typeof userAccountInfo... , y no lo hará, porque la actualización del estado es asíncrona y accederá al nuevo estado solo después de volver a renderizar (en la siguiente función call): se accede al estado desde el cierre que se recrea en cada renderizado.
Reescribe esto:
try{ const response = await axios.post( backendUrl + 'user' , requestData ) const accountInfo = response?.data?.message; setUserAccountInfo(accountInfo) typeof accountInfo.userlogin !== 'undefined' && setUserLogin(accountInfo.userlogin) typeof accountInfo.username !== 'undefined' && setUserName(accountInfo.username) typeof accountInfo.userrole !== 'undefined' && setUserRole(accountInfo.userrole) }catch (err){ console.log(err) } Debe conservar el valor que está pasando a setUserAccountInfo y luego usar ese valor (y no el estado actual) para realizar algunas comprobaciones adicionales y actualizaciones de estado.