Блог

Я пытаюсь извлечь данные из Api. Когда я регистрирую данные ответа, все выглядит нормально. Когда я загружаю свой компонент, я получаю «неопределенный» в каждом месте, где у меня должны быть данные из Api. Когда я нажимаю на боковую панель, каждое «неопределенное» превращается в правильные данные. Я думаю, что столкнулся с некоторой проблемой с асинхронным поведением моих вызовов, но я действительно не знаю, как решить эту проблему.

Для информации : я использую ReactJS

 function Dashboard() {  const [isLoading, setIsLoading] = useState(true);  const [loadedDataFromApi, setLoadedDataFromApi] = useState([]);   //some other vars    useEffect(() =gt; {  setIsLoading(true);  fetch(`https://soccer.sportmonks.com/api/v2.0/fixtures/between/${todayString}/${inTenDaysString}?api_token=oAF3XOevLeC24Zjuzvu56vfOfvyrmHSd11eHr4Ij6ifeJq563NzHeKFrLaJy`  )  .then((response =gt; {  return response.json();  }))  .then((response =gt; {   //FOREACH to loop over every {} in the []  response.data.forEach((data) =gt; {   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) =gt; {  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) =gt; {  console.log("Error getting document:", error);  });   docRef2.get().then((doc) =gt; {  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) =gt; {  console.log("Error getting document:", error);  });  })   setLoadedDataFromApi(response.data);  setIsLoading(false);   }))   }, [todayString, inTenDaysString])   // if we are loading the data return loading ..   if (isLoading) {  return (  lt;sectiongt;  lt;pgt;Loading ...lt;/pgt;  lt;/sectiongt;)  }   return (  // some code )