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

Question

我想知道在异步函数中从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]
}

如果有更强大的方法来实现这一目标，那将是惊人的。

Answer 1

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

我不确定您是如何设置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()