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中解压缩数组时，我可以看到db中的每个条目。如何以我可以遍历并呈现到页面的格式来获取它？

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检索数据后打印数据。

迭代通过firebase查询并将结果呈现为React.js

1 个答案: