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

ryevplcw 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(125)

我在订阅Firebase的Firestore中的更改时遇到了麻烦。我正在用Firebase开发我的第一个React Native项目，因此我对Firebase并不熟悉。
Firebase连接工作正常：我可以从Firstore添加和读取数据。
到目前为止，我已经尝试复制这个问题：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
有什么我错过了吗？你的帮助真的很感激！

reactjs

来源：https://stackoverflow.com/questions/72068621/firebase-and-react-native-subcribe-to-changes-onsnapshot-not-working-properly

2条答案

按热度按时间

bbuxkriu1#

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

赞(0）回复(0）举报 2022-12-12

cld4siwp2#

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