Reactjs FlatList 不在 React Native 中呈现项目

发布于04月23日

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

推荐答案

在组件主体中调用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>
    );
  }
}