Iterieren durch eine Firebase-Abfrage und rendern Ergebnis als Element in React.js

Question

Ich versuche, eine Antwort von einer Firebase-Datenbank durchlaufen und dann eine <select> mit den Optionen, die zurückkommen. Wenn ich jedoch die Antwort von Firebase erhalte und sie in ein Array lege, kann ich nicht iterieren, da die Array-Länge als 0 zurückgegeben wird. Hier ist mein Code:

renderChoices() { 
      var data_list = [] 
      firebase.database().ref("orgs").once("value").then((snapshot) => { 
      snapshot.forEach(function(childSnapshot) { 
      var key = childSnapshot.key; 
      var childData = childSnapshot.val().name; 
      data_list.push(childData); 
     }); 
    }); 
    console.log(data_list, data_list.length); 
} 

in der Konsole bekomme ich [] 0, aber wenn ich das Array in meinem devtools auspacken, kann ich jeden Eintrag aus der db sehen. Wie kann ich das in einem Format erhalten, in dem ich die Seite durchlaufen und rendern kann?

Answer 1

Die Daten werden asynchron aus der Firebase-Datenbank geladen. Wenn Ihre aktuelle console.log ausgeführt wird, wurden die Daten noch nicht geladen und es wird eine Länge von 0 protokolliert. Aber die Chrome-Dev-Tools sind schlauer als ihre eigenen (in diesem Fall) und aktualisieren den Objektbrowser data_list, sobald die Daten eintreffen. Das ist eigentlich eine recht praktische Funktion, aber sehr verwirrend.

Eine einfache Möglichkeit, den Ist-Zustand zu sehen ist statisch JSON zu protokollieren:

console.log(JSON.stringify(data_list), data_list.length); 

Jetzt sehen Sie, dass data_list leer ist und seine Länge ist 0.

Die Art und Weise, mit asynchronen Daten umzugehen, es so Reframe Ihre Lösung. Derzeit haben Sie Code, der besagt "zuerst die Daten laden, dann drucken". Beim Laden von Firebase (und dem größten Teil des modernen Webs) finde ich es einfacher, den Frame zu laden. "Laden Sie die Daten. Wenn die Daten eintreffen, drucken Sie sie."

Jetzt werden die Daten gedruckt, nachdem sie von Firebase abgerufen wurden.