React Native FlatList加载Firestore数据不显示 持续加载异常

核心诱发原因 #

• 底部加载组件逻辑写反：renderFooter方法中判断逻辑倒置，isMoreLoading为true时返回空，为false时反而永久渲染ActivityIndicator，是页面一直显示加载转圈的直接原因。
• 下拉刷新组件传参错误：FlatList的RefreshControl需要传入refreshControl属性，代码中误将整个组件赋值给仅接受布尔值的refreshing属性，导致首屏加载状态逻辑混乱，下拉刷新功能完全失效。
• 函数声明语法错误：函数组件内直接使用getItems = async () => {}、getMore = async () => {}的赋值写法，未用const声明，严格模式下会直接抛出引用错误，中断首屏数据请求流程，导致setIsLoading(false)永远无法执行，加载状态卡死。
• 分页查询规则不一致：首屏请求未添加与分页逻辑一致的orderBy('id')排序规则、未设置单次拉取数量限制，会导致后续分页游标与排序规则不匹配，出现拉取不到数据、重复拉取数据的问题。
• 状态更新违反不可变原则：分页加载逻辑中直接获取原items数组的引用执行push操作，React无法检测到state变更，不会触发列表重渲染，即使拉取到新数据页面也不会更新。
• 滚动标记存储方式错误：onEndReachedCalledDuringMomentum用普通变量声明在组件函数体内，每次组件重渲染都会被重置为false，导致滚动到底部的回调被重复触发，无限发起分页请求。
• 异步请求无异常捕获：Firestore请求如果因权限配置错误、网络波动失败，会直接抛出未捕获异常，加载状态无法被重置，永久停留在加载中。
• 列表key取值异常：Firestore的data()方法默认不返回文档自身ID，直接存储data()返回值如果没有手动写入id字段，keyExtractor取item.id会得到undefined，引发列表key缺失/重复，导致渲染失败。
• 容器样式缺失：最外层父容器和FlatList未设置flex:1，组件没有确定的渲染高度，会出现布局异常、列表无法正常绘制的问题。

修复后完整代码 #

import React, { useState, useEffect, useRef } from 'react';
import { 
  View, 
  Text, 
  Image, 
  FlatList, 
  ActivityIndicator, 
  RefreshControl, 
  StyleSheet 
} from 'react-native';
// 需提前初始化Firestore实例，替换为你的实际引入路径
// import { db } from './firebaseConfig';

const Items = () => {
    const [isLoading, setIsLoading] = useState(false)
    const [isMoreLoading, setIsMoreLoading] = useState(false)
    const [last, setLast] = useState(null)
    const [items, setItems] = useState([])
    // 用ref存储滚动标记，避免重渲染重置状态
    const onEndReachedCalledDuringMomentum = useRef(false);

    const itemsLoc = db.collection('items')

    useEffect(() => {
        getItems();
    }, []);

    // 首屏数据拉取
    const getItems = async () => {
        setIsLoading(true);
        try {
            // 首屏查询与分页保持一致的排序、拉取数量规则
            const snapshot = await itemsLoc.orderBy('id').limit(6).get();
            if(!snapshot.empty){
                // 手动拼接文档ID，保证keyExtractor能取到唯一值
                const newItems = snapshot.docs.map(doc => ({
                  id: doc.id,
                  ...doc.data()
                }));
                setLast(snapshot.docs[snapshot.docs.length-1]);
                setItems(newItems)
            }else{
                setLast(null);
                setItems([])
            }
        } catch (err) {
            console.log('首屏数据拉取失败:', err)
        } finally {
            // 无论请求成功失败，都重置加载状态
            setIsLoading(false);
        }
    }

    // 分页加载更多
    const getMore = async () => {
        if (last && !isMoreLoading){
            setIsMoreLoading(true);
            try {
                // 直接传入文档快照作为游标，比传字段值更稳定
                const snapshot = await itemsLoc.orderBy('id').startAfter(last).limit(3).get();
                if(!snapshot.empty){
                    const appendItems = snapshot.docs.map(doc => ({
                      id: doc.id,
                      ...doc.data()
                    }));
                    setLast(snapshot.docs[snapshot.docs.length - 1]);
                    // 生成新数组更新状态，保证不可变原则
                    setItems(prev => [...prev, ...appendItems]);
                    if(snapshot.docs.length < 3) setLast(null);
                }else{
                    setLast(null)
                }
            } catch (err) {
                console.log('分页数据拉取失败:', err)
            } finally {
                setIsMoreLoading(false);
            }
        }
        onEndReachedCalledDuringMomentum.current = true;
    }

    // 渲染单条列表项
    const renderList = ({item}) => {
        return(
            <View style={styles.container}>
                <Image source={{uri: item.image}} style={styles.imageContainer}/>
                <View style={styles.itemInfoContainer}>
                    <View>
                        <Text style={styles.title}>{item.name}</Text>
                    </View>
                    <View>
                        <Text style={styles.description}>{item.desc}</Text>
                    </View>
                </View>
            </View>
        )
    }

    // 渲染列表底部
    const renderFooter = () => {    
        // 修正判断逻辑：仅分页加载时显示加载器
        if (isMoreLoading) {
            return <ActivityIndicator size="large" color="#64aeae" style={{ marginBottom:10 }}/>
        }
        return null;
    }

    // 下拉刷新
    const onRefresh = () => {
        getItems();
    }

    return(
        <View style={{marginTop: 20, flex: 1}}>
            <FlatList 
                style={{flex:1}}
                showsVerticalScrollIndicator={false}
                data={items}
                keyExtractor={item => item.id}
                renderItem={renderList}
                ListFooterComponent={renderFooter}
                initialNumToRender={3}
                onEndReachedThreshold={0.1}
                // 修正RefreshControl传参位置
                refreshControl={
                    <RefreshControl 
                        refreshing={isLoading}
                        onRefresh={onRefresh}
                    />
                }
                onMomentumScrollBegin={() => onEndReachedCalledDuringMomentum.current = false}
                onEndReached = {() => {
                    if (!onEndReachedCalledDuringMomentum.current && !isMoreLoading){
                        getMore();
                    }
                }}
            />
        </View>
    )
}

// 补全原有样式
const styles = StyleSheet.create({
    container: {},
    imageContainer: {},
    itemInfoContainer: {},
    title: {},
    description: {}
})

export default Items;

内容的提问来源于stack exchange，提问作者Reznov