javascript - 无法迭代从 firebase 中提取的用户数组

Question

这个问题已经有答案了:

How to get data from firestore DB in outside of onSnapshot (1 个回答)

已关闭 4 年前。

我正在将 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 并显示其中的当前数据:

Answer 1

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

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

console.log("Before starting onSnapshot");
db.collection("Users").onSnapshot(res => {
  console.log("Got data");
});
console.log("After starting onSnapshot");

当您运行此代码时，它会记录:

Before starting onSnapshot

After starting onSnapshot

Got data

这可能不是您期望的顺序，但它完全解释了为什么日志语句不能按您的预期工作。当您记录数组长度时，数据尚未从数据库加载。

记录数组似乎有效的原因是 Chrome 在数据加载后更新日志输出。如果将其更改为 console.log(JSON.stringify(temp));，您将看到它记录一个空数组。

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

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

正如您可能想象的那样，许多刚接触异步 API 的开发人员都会遇到这个问题。我建议研究一些有关该主题的先前问题，例如:

• How do I return the response from an asynchronous call?
• THEN ARRAY EMPTY PROMISSE
• How to get data from firestore DB in outside of onSnapshot