Estoy tratando de recuperar datos de una Api. Cuando registro los datos de respuesta, todo se ve bien. Cuando cargo mi componente, obtengo 'indefinido' en cada lugar donde debería tener datos de la Api. Cuando presiono en mi barra lateral, cada 'indefinido' se convierte en los datos correctos. Creo que encuentro algún problema con el comportamiento asíncrono de mis llamadas, pero realmente no sé cómo resolver este problema.

Para información: estoy usando ReactJs

 function Dashboard() { const [isLoading, setIsLoading] = useState(true); const [loadedDataFromApi, setLoadedDataFromApi] = useState([]); //some other vars useEffect(() => { setIsLoading(true); fetch(`https://soccer.sportmonks.com/api/v2.0/fixtures/between/${todayString}/${inTenDaysString}?api_token=oAF3XOevLeC24Zjuzvu56vfOfvyrmHSd11eHr4Ij6ifeJq563NzHeKFrLaJy` ) .then((response => { return response.json(); })) .then((response => { //FOREACH to loop over every {} in the [] response.data.forEach((data) => { var localTeam = data.localteam_id; var visitorTeam = data.visitorteam_id; var docRef1 = db.collection("Teams").doc(`${localTeam}`) var docRef2 = db.collection("Teams").doc(`${visitorTeam}`) docRef1.get().then((doc) => { if (doc.exists) { data.localTeam = doc.data().name; data.logoLocalTeam = doc.data().logo; } else { // doc.data() will be undefined in this case console.log("No such Team found!"); } }).catch((error) => { console.log("Error getting document:", error); }); docRef2.get().then((doc) => { if (doc.exists) { data.visitorTeam = doc.data().name; data.logoVisitorTeam = doc.data().logo; } else { // doc.data() will be undefined in this case console.log("No such Team found!"); } }).catch((error) => { console.log("Error getting document:", error); }); }) setLoadedDataFromApi(response.data); setIsLoading(false); })) }, [todayString, inTenDaysString]) // if we are loading the data return loading .. if (isLoading) { return ( <section> <p>Loading ...</p> </section>) } return ( // some code )