Firebase 和 React Native 订阅更改 (onSnapshot) 无法正常工作答案

【问题标题】：Firebase and React Native subcribe to changes (onSnapshot) not working properlyFirebase 和 React Native 订阅更改 (onSnapshot) 无法正常工作
【发布时间】：2022-12-11 03:33:34
【问题描述】：

我在订阅 Firebase 的 Firestore 中的更改时遇到问题。我正在用 Firebase 开发我的第一个 React Native 项目，因此我对 Firebase 不是很熟悉。

Firebase 连接正常：我可以从 Firestore 添加和读取数据。

到目前为止，我已经尝试复制这个问题：React useState and Firebase onSnapshot 这对我不起作用。

useEffect(() => {
    const q = query(collection(db, "rooms"), where("active", "==", "true"));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      setUser(querySnapshot);
    });
    console.log("User: " + user);
    return () => {
      unsubscribe();
    };
  }, []);

当我运行它时，我得到以下输出 User: undefined

我也尝试过这种方法：

const q = query(collection(db, "rooms"), where("active", "==", "true"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(doc);
  });
});
unsubscribe();

那也行不通。

在这里你可以看到我的 Firestore： Firestore

我有什么想念的吗？非常感谢您的帮助！

【问题讨论】：

你检查过How to get data from firestore DB in outside of onSnapshot了吗？ console.log() 电流甚至在onSnapshot 获取数据之前就已经运行。此外，如果您在 Firestore 中将“true”存储为布尔值，则使用 where("active", "==", true) 而不是 where("active", "==", "true")，否则查询将在其字符串所在的位置查找活动字段。
如果我理解正确，我需要“onSnapshot”函数来订阅更改。我不想只读取一次数据，但我想在 firestore 中获得连续的变化。

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

onSnapshot 、setUser 和其他操作状态的调用是异步的，因此您必须确保记录它们后异步操作已经完成。

这就是为什么你打电话给setUser(querySnapshot);是里面回调，因为它确保它发生在 querySnapshot 从数据库中可用之后。

如果您想查看从数据库中获取的值，请将其记录在回调中，如下所示：

const unsubscribe = onSnapshot(q, (querySnapshot) => {
  console.log("Snapshot: " + querySnapshot.size);
  setUser(querySnapshot);
});

同样，如果你想显示更新后的状态，你可以将回调传递给setUser，一旦状态更新就会调用它：

const unsubscribe = onSnapshot(q, (querySnapshot) => {
  console.log("Snapshot: " + querySnapshot.size);
  setUser(querySnapshot, () => {
    console.log("User: " + user.size);
  });
});

【讨论】：

恐怕我在理解 onSnapchat 函数的工作原理时仍然遇到一些问题。之后我需要调用 unsubscribe() 吗，或者这个函数是如何调用的？
“仍然有一些问题”很难解决。您是否应用了我在回答中显示和解释的更改？您在控制台上看到这些更改的输出是什么？
不幸的是，我没有在控制台中获得任何日志。也许我没有以正确的方式调用该函数......我已经尝试通过简单调用 unsubscribe() 来尝试它，但这并没有带来任何改进。

【解决方案2】：

确保您已经在 where 和 order by 子句中使用的字段上创建了索引。您可以通过转到 firebase 控制台 -> Firestore 数据库 -> 索引来创建它。

【讨论】：