setTeams在useeffect代码的其余部分之前运行

Question

我在我的react应用程序中从firebase firestore获取一些数据。这应该在ul中呈现。当useEffect运行时，setTeams在从firebase获取数据之前运行。从firebase获取数据后，我如何运行setTeams ?

useEffect(() => {
const teamsList = []
firebase.auth().onAuthStateChanged((user) => {
if (user) {
firebase.firestore().collectionGroup('members').where('user', '==', user.uid).get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
firebase.firestore().collection('teams').doc(doc.data().teamId).get().then((doc) => {
teamsList.push({
name: doc.data().name,
teamID: doc.data().teamId,
})
console.log('Her')
})
})
setTeams(teamsList)
console.log('Der')
})
} else {
history.push("/logg-inn")
}
})
}, [])

Answer 1

我用async await而不是then重新格式化了你的代码，我认为它现在有更好的可读性:

如果您需要基于多个承诺设置一个值，请使用Promise.all。

useEffect(() => {
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
const querySnapShot = await firebase
.firestore()
.collectionGroup("members")
.where("user", "==", user.uid)
.get();
const promises = querySnapshot.map((doc) => 
firebase.firestore().collection("teams").doc(doc.data().teamId).get());
const teams = await Promise.all(promises);
const docs = teams.map((doc) => ({
name: doc.data().name,
teamID: doc.data().teamId,
}));
setTeams(docs);
console.log("Der");

} else {
history.push("/logg-inn");
}
});
}, []);