javascript - Firebase firestore onSnapshot 没有在 ReactJs 应用程序上获取更改和渲染

Question

我们有一个使用 Firebase 的 ReactJs 应用程序。当您首次注册应用程序并首次登录时，应用程序使用该onSnapshot方法从 Firebase 加载一个文档，并呈现一个使用视图中数据的组件。问题是，当我们对加载的文档进行更改并将这些更改写回 Firebase 时，ReactJs 应用程序没有发现这些更改已被应用，因此视图没有更新。但是，如果我们刷新应用程序，我们所做的更改会被渲染，并且未来的更改会正常获取，一切都很好。

这是我们调用该onSnapshot方法的代码。您可以看到我在其中粘贴了一些调试文本，仅在未加载文档时才呈现一次，因此我知道问题在于这没有在 firestore 中获取文档更改。

function useHub(hubId) {
  console.debug("useHub");
  const Firebase = React.useContext(FirebaseContext);

  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);
  const [hub, setHub] = React.useState(null);

  React.useEffect(() => {
    console.debug("useHub: useEffect");
    setHub(null);
    console.log('****************************');
    console.log("Hub ID " + hubId);
    if (hubId) {
      const unsubscribe = Firebase.firestore()
        .collection("hubs")
        .doc(hubId)
        .onSnapshot(
          (doc) => {
            const hubDoc = Object.assign({}, { id: doc.id }, doc.data());

            console.log('***************************');
              console.log('***************************');
                console.log(hubDoc);
              console.log('***************************');
              console.log('***************************');

            setHub(hubDoc);
            setLoading(false);
            setError(false);
          },
          (error) => {
            console.error("Error:", error);
            setError(error.message);
            setLoading(false);
          }
        );

      return () => unsubscribe();
    }
  }, [Firebase, hubId]);

  return {
    loading,
    error,
    hub,
  };
}

export { useHub };

发生这种情况的可能原因是什么？

标签： javascriptreactjsfirebasegoogle-cloud-firestore

Answer 1

您可以考虑让您的组件自行更新作为一种解决方法。我在这里找到了这个文件，它描述了细节。