时间戳

首页 > 解决方案 > 在 React 中从 Firebase 请求多个数据的最佳方法是什么

reactjs - 在 React 中从 Firebase 请求多个数据的最佳方法是什么

问题描述

我想知道在异步函数中从 Firebase 获取多个数据以等待来自第一个请求的一些数据的最佳方法是什么。我现在正在使用此代码，但它不可靠，有时会中断说它无法获取第二次调用的数据，因为它是undefined.

function useOccasion() {
  const [occasionData, setOccasionData] = useState(null)
  const [friend, setFriend] = useState(null)
  let { occasion } = useParams()

  useEffect(() => {
    const unsubscribe = firestore.collection('occasions').doc(occasion)
      .onSnapshot(async eventData => {
        setOccasionData({id: eventData.id, ...eventData.data()})

        let friendData = await firestore.collection("friends").doc(eventData.data().friend).get();
        setFriend({id: friendData.id, ...friendData.data()});
      })
    return () => unsubscribe()
  }, [occasion])

  return [occasionData, friend]
}

如果有更强大的方法来实现这一点，那就太棒了。

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

我建议将您的数据提取分成两个钩子，一个用于每个收集场合和朋友。

我不确定您是如何设置 firebase 的，但我通过上下文访问它。

例如

const useOccasion = () => {
  const firebase = useContext(FirebaseContext)

  const [occasions, setOccasions] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const unsubscribe = firebase.db.collection('occasions')
    .onSnapshot(snapshot => {
      if (snapshot.size) {
        let occasionList = []
        snapshot.forEach(doc =>
          occasionList.push({ ...doc.data(), uid: doc.id }),
        )

        setOccasions(occasionList)
        setLoading(false)
      } else {
        setOccasions([])
        setLoading(false)
      }
    })

    return () => {
      unsubscribe()
    }
  }, [])

  return { occasions, loading }
}

最后，在您需要数据的组件中，您可以访问此挂钩：

const { occasions, loading } = useOccasion()

推荐阅读