Tworzę aplikację przy użyciu reakcji natywnych i firestore. Tutaj kawałek mojego kodu;

getData(mat){
 let count = 0;
 let val;
db.collection("Yemek").doc("Materials").collection(mat).get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
      count++;
      val = doc.data().value;
      matKey = mat+count.toString();
      this.state.array.push([
        meal=mat,  value=val, status=false, key=matKey 
      ]);
  });
}).catch(err => {
  console.log('Error getting documents', err);
  return false;
  });
}
componentWillMount(){
 this.getData('vegetables');
 this.getData('legumes');
 this.getData('meat');
 this.getData('milk');
 this.getData('others');
}
render() {
return (//Render components)}

Renderuję komponenty z tablicą znajdującą się w stanie. Ale zwraca wartość null, ponieważ komponenty renderowania aplikacji przed zakończeniem zapytania. Szukałem wczoraj. Myślę, że powinienem używać obietnic, ale tego nie zrozumiałem. Czy mógłbyś mi pomóc?

0
Cem Kocagöz 11 listopad 2018, 01:46

1 odpowiedź

Najlepsza odpowiedź

Zwykle zalecanym sposobem na zrobienie czegoś takiego jest użycie stanu. W konstruktorze zainicjuj swój stan i ustaw wartość logiczną (na przykład „ładowanie”), aby wskazać, że strona się ładuje. Po zakończeniu ładowania ustaw wartość ładowania na false, aby wskazać, że ładowanie zostało zakończone. Spowoduje to ponowne renderowanie klasy.

Aby uzyskać spójność, możesz użyć renderowania warunkowego; jeśli strona nadal się ładuje, pokaż wskaźnik aktywności, w przeciwnym razie pokaż zawartość strony. Oba te elementy są dobrze reprezentowane przez przykłady tutaj i gdzie indziej.

0
Derek 4 grudzień 2018, 19:05