React Native Flatlist 仅在一毫秒内渲染所有项目

Question

我从 firebase 获取数据，将数据推送到数组中并在平面列表组件中呈现项目。我错过了什么？

但是列表只在很短的时间内呈现项目。

import React, { useState, useEffect } from 'react';
import { FlatList, Box } from "native-base";
import { StyleSheet } from 'react-native'
import EventCard from "./EventCard.js";
import { LogBox } from 'react-native';
import { ActivityIndicator } from 'react-native';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

// Silent warning about https://github.com/facebook/react-native/issues/12981
LogBox.ignoreLogs(['Setting a timer']);

export default function Events() {
    const [loading, setLoading] = useState(true);
    const [events, setEvents] = useState({});

    useEffect(() => {
        let eventData = []
        const firestore = getFirestore();
        const querySnapshot = getDocs(collection(firestore, 'events'));
        querySnapshot.then(querySnapshot => {
            querySnapshot.docs.map(doc => {
                eventData.push(doc.data())
                setEvents(eventData)
            })
        });
        setLoading(false);
    }, []);

    if (loading) {
        return <ActivityIndicator />;
    }

    return (
        <Box style={styles.container}>
            <FlatList
                data={events}
                keyExtractor={item => item.key}
                renderItem={({ item }) => (<EventCard key={Date.now()} eventData={item} />
                )}
            />
        </Box>
    );
}

const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        alignItems: 'center'
    },
})

感谢您的宝贵时间。我真的卡住了。

Answer 1

您在 map() 中有 setEvents(eventData)，因此在每次迭代后都会更新状态。而是解析数据然后更新一次状态。

querySnapshot.then(querySnapshot => {
  querySnapshot.docs.map(doc => {
    eventData.push(doc.data())
  })
  // After iterating over all docs
  setEvents(eventData)
});

React Native Flatlist 仅在一毫秒内渲染所有项目

React Native Flatlist rendered all items only for a millisecond

javascript

firebase

reactjs

react-native

flatlist