Javascript 迭代firebase查询并将结果呈现为React.js中的元素

我试图遍历firebase db的响应，然后用返回的选项填充

。但是，当我从firebase接收到响应并将其放入数组时，我无法遍历它，因为数组长度返回为

0

。这是我的密码：

    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); 
}

---

在控制台中，我得到

[]0

，但是当我在devtools中解包数组时，我可以看到数据库中的每个条目。如何以可以迭代并呈现到页面的格式获取此信息？

数据是从Firebase数据库异步加载的。因此，当当前的

console.log

运行时，数据尚未加载，它记录的长度为

0

。但是Chrome开发工具比它们自己的好（在本例中）更智能，并且在数据进入时更新

数据列表

对象浏览器。这实际上是一个非常方便的特性，但在这里非常混乱

查看实际状态的一种简单方法是记录静态JSON：

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

现在您将看到

data\u list

为空，其长度为

0

处理异步数据加载的方法是重新构造您的解决方案。目前，您的代码显示“首先加载数据，然后打印”。当从Firebase（以及大多数现代网络）加载时，我发现更容易将其框定为“开始加载数据。当数据进来时，打印它。”

---

现在，它将在从Firebase检索数据后打印数据。

Hello:D您知道这个问题的答案吗？

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); 
    });
}