Question

我正在将Firebase的Cloud Firestore用于正在处理的网页。我当前已将其设置为在添加/加入新用户时在“用户”集合中创建一个新文档。问题是当我尝试下拉用户列表以遍历他们时，我无法。

我尝试使用各种循环对其进行迭代。当控制台记录为0时，循环似乎不像对象的长度那样运行。

let temp = [];
db.collection("Users").onSnapshot(res => {
  const changes = res.docChanges();
  changes.forEach(change => {
    if (change.type === "added") {
      temp.push({
        id: change.doc.id,
        email: change.doc.data().email
      });
    }
  });
});
console.log(temp);
console.log(temp.length);

我期望第二个控制台日志为2，但输出为0。奇怪的是，当我从上方的控制台日志查看对象时，它显示的长度为2并在其中显示当前数据：< / p>

Answer 1

从Firestore异步加载数据。由于这可能需要一些时间，因此您的主代码将在数据加载期间继续运行。然后在加载数据时，将调用您的回调函数。

通过添加一些日志记录，您可以轻松地在实践中看到这一点：

conda install PyAudio`

运行此代码时，它将记录：

在开始onSnapshot之前

启动onSnapshot后

获得数据

这可能不是您期望的顺序，但是它完全解释了为什么日志语句无法按您期望的那样工作。在您记录阵列长度时，尚未从数据库中加载数据。

记录阵列似乎有效的原因是，Chrome在加载数据后更新了日志输出。如果将其更改为console.log("Before starting onSnapshot"); db.collection("Users").onSnapshot(res => { console.log("Got data"); }); console.log("After starting onSnapshot");，则会看到它记录了一个空数组。

这意味着所有需要访问数据的代码都必须位于回调内部或从那里调用：

console.log(JSON.stringify(temp));

您可能会想像，许多异步API的新开发人员都遇到了此问题。我建议研究有关该主题的先前问题，例如：

无法迭代从Firebase提取的用户阵列

1 个答案: