尝试在react-native应用程序中呈现文档

Question

我正在获取文档数据并将其存储在状态中，但是当我尝试呈现它时，我只获得了第一项。我注意到，当我刷新应用程序时，我可以简单地看到其他项目。不知道为什么我的映射没有渲染所有的数据。

const [tickets, setTickets] = useState([]);
useEffect(() => {
GetTickets();
}, []);
console.log(tickets);

const db = getFirestore();
const colRef = collection(db, "Tickets");
function GetTickets() {
getDocs(colRef).then((snapshot) => {
let tickets = [];
snapshot.docs.forEach((doc) => {
tickets.push({ ...doc.data(), id: doc.id });
setTickets(tickets);
});
});
}
return (
<View style={GlobalStyles.container}>
<Text>Previous tickets</Text>
{tickets.map((ticket) => (
<Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
))}
</View>
);

Answer 1

试试这可能是你的状态在你的数据被推入数组之前就已经设置好了像这样把它放在循环之外

const [tickets, setTickets] = useState([]);
useEffect(() => {
GetTickets();
}, []);
console.log(tickets);

const db = getFirestore();
const colRef = collection(db, "Tickets");
function GetTickets() {
getDocs(colRef).then((snapshot) => {
let tickets = [];
snapshot.docs.forEach((doc) => {
tickets.push({ ...doc.data(), id: doc.id });
});
setTickets(tickets);
});
}
return (
<View style={GlobalStyles.container}>
<Text>Previous tickets</Text>
{tickets.map((ticket) => (
<Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
))}
</View>
);

Answer 2

在React Native中，你可以使用map或flatList用于呈现数组。如果要显示大量数据，最好使用flatList(数据量大时性能更好)。

替换这段代码

{tickets.map((ticket) => (
<Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
))}

的代码

<FlatList
data={tickets}
renderItem={({item}) => <Text>{item.form.TicketNumber}</Text>}
/>

Answer 3

我不确定它是否会对你有帮助，但有两个评论可以帮助你在你的搜索:

• 您正在呼叫setTickets在循环内部，由于异步流，闻起来像有问题。
• 还有，为什么你在函数的作用域中定义变量名，和票券状态的变量名相同，这听起来不太好。

希望能帮到你。