遍历 firebase 查询并将结果呈现为 React.js 中的元素

Question

我正在尝试遍历来自 firebase 数据库的响应，然后使用返回的选项填充 <select>。但是，当我收到来自 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 中解压缩数组时，我可以看到数据库中的每个条目。如何以可以迭代并呈现到页面的格式获取此内容？

Answer 1

数据是从 Firebase 数据库异步加载的。因此，当您当前的console.log 运行时，数据尚未加载，它记录的长度为0。但是 Chrome 开发工具比它们自己的好（在这种情况下）更智能，并在数据进入时更新 data_list 对象浏览器。这实际上是一个非常方便的功能，但在这里很混乱。

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

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

现在你会看到data_list 是空的，它的长度是0。

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

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

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