在我的 firestore 数据库中,我引用了 Meal 集合中的 Zutaten 集合。现在我尝试在我的列表组件中显示来自 Zutaten 集合的数据。我的第二个快照中的console.log('ingredient data: ', documentSnapshot.data())
语句正常工作,并显示了 Zutaten 集合中的数据。但是我无法访问 useEffect 函数之外的数据,所以我认为我在 react-hooks 上犯了一个错误。我的代码:
function Meal() {
const [loading, setLoading] = useState(true);
const [meal, setMeal] = useState([]); // Initial empty array of meal
const [ingredient, setIngredient] = useState([]);
useEffect(() => {
const subscriber = firestore()
.collection('Meal')
.onSnapshot((querySnapshot) => {
const meal = [];
querySnapshot.forEach(documentSnapshot => {
meal.push({
...documentSnapshot.data(),
//key: documentSnapshot.id,
});
const ingredient = [];
for (let i=0; i<documentSnapshot.data().Zutaten.length; i++) {
documentSnapshot.data().Zutaten[i].get().then(documentSnapshot => {
if (documentSnapshot.exists) {
console.log('ingredient data: ', documentSnapshot.data())
ingredient.push({
...documentSnapshot.data(),
//key: documentSnapshot.data().id,
});
};
})
setIngredient(ingredient);
}
});
setMeal(meal);
setLoading(false);
});
// Unsubscribe from events when no longer in use
return () => subscriber();
}, []);
console.log('this is it: ', ingredient);
if (loading) {
return <ActivityIndicator />;
}
return (
<List
style={styles.container}
contentContainerStyle={styles.contentContainer}
data={meal}
renderItem={({ item }) => (
<Card style={styles.item}>
<Text style={styles.title}> {item.Name} </Text>
<Layout>
<Image
style={{ height: 128, borderRadius: 5, borderWidth: 2, borderColor: 'black', marginHorizontal: -20 }}
source={{ uri: item.srcImage}}
/>
</Layout>
</Card>
)}
/>
);
}