时间戳

首页 > 解决方案 > 在 React.js 中根据 uid 检索 firebase 集合

reactjs - 在 React.js 中根据 uid 检索 firebase 集合

问题描述

我一定已经阅读了 50-100 篇关于这个主题的文章。我似乎仍然无法解决它，也无法理解它。

在我的 Firestore 数据库中，我有一个名为"documents"的集合。每个文档都有自己的“uid”字段。我正在尝试根据登录用户的 uid 检索集合。

我得出的结论是，在“取消订阅”功能运行之前，我的应用程序没有获得用户。可能是因为当 useEffect 首次运行时我的用户为空（最初是）。但是我应该怎么做才能使函数等待用户变为空值？如果这是我应该使用的逻辑。

PS。此外，似乎没有使用 where 函数。怎么来的？

import { useEffect, useState } from 'react'
import { onAuthStateChanged } from 'firebase/auth'
import { db, auth } from '../firebase/config'
import { collection, onSnapshot, query, where } from 'firebase/firestore'

import AddDocument from './AddDocument'
import Document from './Document'

const DocumentList = ({ title }) => {

    const [user, setUser] = useState()
    const [documents, setDocuments] = useState([])

    console.log(user)

    useEffect(() => {

      onAuthStateChanged(auth, currentUser => {
        setUser(currentUser)
      })

      const documentCollection = collection(db, 'documents').where('uid', '==', user.uid)

      const unSubscribe = onSnapshot(documentCollection, (snapshot) => {
        let results = []
        snapshot.docs.forEach(document => {
            results.push({...document.data(), id: document.id})
        })
        setDocuments(results)
      })

      return () => unSubscribe()

    }, [user])

    return (
        <div className="mt-16">
            <h5 className="text-gray-500">{title}</h5>
            <div className="grid grid-cols-8 mt-4">
                {documents && documents.map((props) => (
                    <Document key={props.id} {...props} />
                ))}
                <AddDocument />
            </div>
        </div>
    )
}

export default DocumentList

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

第一步是所有需要当前用户的代码都应该在回调onAuthStateChanged中，否则user不会有正确的值。所以：

onAuthStateChanged(auth, currentUser => {
  setUser(currentUser)
  const documentCollection = collection(db, 'documents').where('uid', '==', currentUser.uid)
                                                                          //  
  const unSubscribe = onSnapshot(documentCollection, (snapshot) => {
    let results = []
    snapshot.docs.forEach(document => {
      results.push({...document.data(), id: document.id})
    })
    setDocuments(results)
  })
})
//return () => unSubscribe() //  This will also have to change

推荐阅读