useEffect在初始加载时不存储Firebase数据的状态，只有在快速刷新后才会显示

Question

更新

@Chris在下面的回答帮助我解决了我的问题。安装反应火基钩包并设置代码，如下所示。现在一切都完美无缺了！)

const [value] = useCollection(collection(db, `${sessionUserId}`), {
    snapshotListenOptions: { includeMetadataChanges: true },
  })
  useEffect(() => {
    if (value) {
      const allData = JSON.parse(
        JSON.stringify(
          value?.docs.map((doc) => ({
            id: doc.id as string,
            resultData: doc.data() as DocumentData,
          }))
        )
      )
      setAllLogs(allData)
    }
  }, [value])

我在我的项目中使用了什么？ NextAuthjs，Firebase，Recoiljs

​

我有一个useRecoilState钩子来保存用户创建的日志。

const [allLogs, setAllLogs] = useRecoilState(modalAllLogs)

modalAllLogs看起来如下所示：

export const modalAllLogs = atom<Array<DocumentData>>({
  key: 'allLogs',
  default: [],
})

这就是问题所在。我有一个useEffect钩子，它从数据库中获取用户拥有的数据，并将setAllLogs分配给该数据。注意:我*在其他地方没有状态更新。

useEffect(() => {
    const docQuery = query(
      collection(db, `${sessionUserId}`),
      orderBy('timestamp', 'desc')
    )
    const unsubscribe = onSnapshot(
      docQuery,
      (snapshot: QuerySnapshot<DocumentData>) => {
        const data = JSON.parse(
          JSON.stringify(
            snapshot.docs.map((doc: QueryDocumentSnapshot<DocumentData>) => ({
              id: doc.id as string,
              resultData: doc.data() as DocumentData,
            }))
          )
        )
        setAllLogs(data)
      }
    )
    return unsubscribe
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [db])

所发生的情况是，在初始呈现上，allLogs返回一个空数组，这很有意义，但在我对useEffect钩子所在的同一个文件中进行任何编辑之前，allLogs将保持空，然后NextJS触发它的快速呈现，然后allLogs才会突然正确地显示数据。我做了一个console.log(snapshot)，它在每个初始呈现上都是空的。

每当我使用我创建的输入添加数据时，Firebase就会正确地存储所有数据。唯一的问题是数据没有加载到初始呈现上。除此之外，我没有其他问题。

我不知道我在这里做了什么错事。也许是RecoilState我利用错了？

我从其他论坛尝试过许多事情--将依赖项更改为allLogs (这给了我无限循环)，尝试使用getDocs()而不是onSnapshot()，等等。

Answer 1

这里的问题是，useEffect不会被触发，因为"db“常量不会改变。

查看这些用于Firebase/ https://github.com/CSFrequency/react-firebase-hooks/tree/master/firestore的自定义钩子，或将onSnapshot提升以获得实时结果。但在最后一种情况下，呈现不会被触发，所以我认为最好使用自定义钩子。