Soy nuevo en reaccionar! y traté de buscar una solución pero, lamentablemente, no tuve una respuesta. Estoy tratando de obtener datos de perfil de una función asíncrona en useEffect, la primera llamada del componente siempre no muestra los datos (solo muestra la interfaz sin los datos) y tampoco muestra "cargado" en la consola que lo uso para probar, como muestra el código. sin embargo, cuando actualizo la página, todos los datos se cargan correctamente
aquí está el código:
const [profile, setProfile] = useState({}); useEffect(() => { async function fetchData() { try { /*some code to get the instance and account used is the function getProfile */ const response = await instance.methods.getProfile(account[0]).call(); setProfile(response.profile); } catch (error) { alert( `Failed`, ); console.error(error); } } fetchData().then(()=>{ console.log('Loaded!') }); });Qué tengo que hacer ! si no hay solucion! ¿Cómo se puede actualizar el componente que cargó? o algo así
primero, debe useEffect la lista de dependencylist de efectos para ejecutar solo después de la representación de la página y cada nueva representación que no le dé a la lista de dependencylist se ejecutará useEffect cada vez que se actualice el estado, el problema es que cuando carga la página por primera vez no hay datos para mostrar por qué no muestra nada porque la API necesita tiempo para obtener datos para que pueda mostrar el cargador cuando la API está haciendo una llamada
const [profile, setProfile] = useState({}); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { try { setLoading(true) /*some code to get the instance and account used is the function getProfile */ const response = await instance.methods.getProfile(account[0]).call(); setProfile(response.profile); } catch (error) { console.error(error); } finally { setLoading(false) } } fetchData(); },[]); return loading ? <div>Loading....</div> : now show your component here