时间戳

首页 > 解决方案 > React hooks，为什么DB值变化时会自动重新渲染？

reactjs - React hooks，为什么DB值变化时会自动重新渲染？

问题描述

首先，我使用 Firebase 来构建我的数据库。

我像这样通过 useState 保存了我的数据库值。

const getFromFirestore = useCallback(() => {
    console.log("GET From Firestore");
    webtoonSites.forEach((siteName) => {
      days.forEach(async (day) => {
        await dbService
          .collection(userObj.uid)
          .doc(siteName)
          .collection(day)
          .onSnapshot((snapShot) => {
            const webtoonArr = snapShot.docs.map((doc) => doc.data());
            setMyWebtoons((prev) => {
              return {
                ...prev,
                [siteName]: {
                  ...prev[siteName],
                  [day]: webtoonArr,
                },
              };
            });
          });
      });
    });
    setDataInit(true);
  }, [myWebtoons, userObj]);

然后，我通过 Firebase 更改了 DB 值，因为有一些东西要删除。

if (ok) {
        console.log("delete");
      await dbService
        .collection(userObj.uid)
        .doc(siteName)
        .collection(targetWebtoonObj.day)
        .doc(targetWebtoonObj.title)
        .delete();
    }

我以为 React 不会识别 DB 值已更改，但它识别了它并进行了自动重新渲染过程。

因此，我使用 console.log() 检查了函数“getFromFirestore”的执行情况，该函数从 db 设置状态值，但它甚至没有被执行。

React hooks 何时以及如何识别 db-changed 并更改状态值...？

标签： reactjsfirebasegoogle-cloud-firestorereact-hooksuse-state

解决方案

根据 Firestore 关于监听更改的文档（强调我的）：

onSnapshot()您可以使用该方法收听文档。使用您提供的回调的初始调用会立即使用单个文档的当前内容创建文档快照。然后，每次内容更改时，另一个调用会更新文档快照。

因此，每次数据更改时，您的onSnapshot回调都会再次被调用。而且由于您再次处理那里的数据并再次调用setMyWebtoons，更新的数据会自动重新呈现。很酷，对吧？:)

推荐阅读