在地图函数中渲染Firebase数据

Question

我试图从firebase get函数中呈现数据，但它没有显示任何内容。images-console.log显示2个值，但不会在页面上显示。有人对此有什么建议吗？

function cards(){
store.collection('users').get().then(snapshot => {
images = snapshot.docs.map(doc => doc.data().image)
console.log(images)
return images.map((doc) => {
return (
<Card style={[styles.card, styles.card1]}>
<Text style={styles.label}>A</Text>
</Card>
)
})
})
}
return (
<View>
<View style={styles.viewport}>
<CardStack style={styles.content}>
{cards()}
</CardStack>
</View>
</View>
)
}

Answer 1

您正试图调用一个异步函数，并使用then从中获得返回。您总是会从中得到一个未定义的，因为then在函数已经返回未定义或在本例中什么都没有的情况下完成。

尝试使用状态并正确处理异步调用，如下所示：

import React, { useState, useEffect } from "react";
const YourComponent = () => {
const [list, setLits] = useState([]);
useEffect(() => {
const snapshot = await store.collection("users").get();
const images = [];
snapshot.docs.forEach((s) => {
images.push(doc.data().image);
});
setLits(images);
}, []);
return (
<View>
<View style={styles.viewport}>
<CardStack style={styles.content}>
{list.map((i) => {
return (
<Card style={[styles.card, styles.card1]}>
<Text style={styles.label}>A</Text>
</Card>
);
})}
</CardStack>
</View>
</View>
);
};