React Native中FlatList无法渲染列表项问题求助

问题根源 #

1. 数据收集逻辑错误：代码中创建了临时数组testData，但循环遍历Firestore文档时，却往状态变量test中push数据，导致testData始终为空数组。调用setTest(testData)后，test状态仍为空，FlatList没有可渲染的数据源。
2. 数据加载时机错误：直接在组件渲染分支中调用loadData，会导致组件重复触发该函数，引发不必要的请求甚至渲染循环。

修正后的完整代码 #

import { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
// 导入你的Firebase相关依赖

export default function HomeScreen({ navigation }) {
  const [loading, setLoading] = useState(true);
  const [test, setTest] = useState([]);

  const loadData = async () => {
    try {
      const q = query(collection(FIREBASE_FIRESTORE, "test"));
      const qSnap = await getDocs(q);
      const testData = [];
      qSnap.forEach((doc) => {
        const documentData = doc.data();
        documentData.id = doc.id;
        testData.push(documentData); // 改为向临时数组testData存入数据
      });
      setTest(testData);
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      setLoading(false); // 无论请求成功/失败，都结束加载状态
    }
  };

  // 使用useEffect确保组件挂载后仅加载一次数据
  useEffect(() => {
    loadData();
  }, []);

  if (loading) {
    return <ActivityIndicator style={style.indicator} />;
  }

  return (
    <View style={style.container}>
      <FlatList
        alwaysBounceVertical={true}
        keyExtractor={(item) => item.id}
        data={test}
        renderItem={({ item }) => (
          <View style={style.cell}>
            <Text style={style.text}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

关键修正说明 #

• 修正数据收集逻辑：将循环中的test.push改为testData.push，确保Firestore返回的文档数据正确存入临时数组，再通过setTest更新状态。
• 规范数据加载时机：用useEffect替代直接在渲染逻辑中调用loadData，空依赖数组保证组件挂载后仅执行一次数据加载。
• 增加错误处理：通过try/catch捕获数据加载过程中的异常，finally块确保加载状态一定会被关闭，避免页面一直显示加载指示器。

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