平面列表未在React Native中呈现项目

正在调用 loadData() 组件主体中的错误。你应该使用 useEffect 以获取数据。此外,您创建了 testData ,但你只是在努力 test 在您的 forEach 。这应该有效:

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

  useEffect(() => {
    let loadData = async () => {
      const q = query(collection(FIREBASE_FIRESTORE, "test"));
      const qSnap = await getDocs(q);
      let testData = [];
      qSnap.forEach((doc) => {
        let documentData = doc.data();
        documentData.id = doc.id;
        // test.push(documentData);
        testData.push(documentData);
      });
      setTest(testData);
      setLoading(false);
    };
    loadData();
  }, []);

  if (loading) {
    return <ActivityIndicator style={style.indicator} />;
  } else {
    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>
    );
  }
}

import React, { useState, useEffect } from "react";
import { ActivityIndicator, FlatList, Text, View } from "react-native";
import { collection, query, getDocs } from "firebase/firestore";
import { FIREBASE_FIRESTORE } from "../constants/firebase";

const HomeScreen = () => {
  const [loading, setLoading] = useState(true);
  const [testData, setTestData] = useState([]);

  useEffect(() => {
    const fetchTestData = async () => {
      try {
        const q = query(collection(FIREBASE_FIRESTORE, "test"));
        const qSnap = await getDocs(q);
        const fetchedTestData = [];
        qSnap.forEach((doc) => {
          const documentData = doc.data();
          documentData.id = doc.id;
          fetchedTestData.push(documentData);
        });
        setTestData(fetchedTestData);
        setLoading(false);
      } catch (error) {
        console.error(error);
      }
    };
    fetchTestData();
  }, []);

  const renderCell = ({ item }) => (
    <View style={styles.cell}>
      <Text style={styles.text}>{item.title}</Text>
    </View>
  );

  if (loading) {
    return <ActivityIndicator style={styles.indicator} />;
  } else {
    return (
      <View style={styles.container}>
        <FlatList
          alwaysBounceVertical
          keyExtractor={(item) => item.id}
          data={testData}
          renderItem={renderCell}
        />
      </View>
    );
  }
};

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  cell: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  text: {
    fontSize: 16,
  },
  indicator: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
};

export default HomeScreen;