FlatList不在React Native中渲染项目

tquggr8v  于 2023-05-01  发布在  React
关注(0)|答案(2)|浏览(111)

React Native新手,我在控制台中打印了我的数据,但没有呈现列表项?test是我的useState中的数据。
下面是我的代码:

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

  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);
    });
    setTest(testData);
    setLoading(false);
  };

  if (loading) {
    loadData();
    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>
    );
  }
}
k75qkfdt

k75qkfdt1#

在组件主体中调用loadData()不正确。您应该使用useEffect来获取数据。此外,您创建了testData,但您只在forEach中推送test。这应该可以工作:

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>
    );
  }
}
wlwcrazw

wlwcrazw2#

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;

相关问题