在平面列表上显示 firebase 数据 [英] display firebase data on a flatlist

问题描述

我正在尝试在一个平面列表中显示我在 firebase 上拥有的一堆数据，我现在真的不知道问题出在哪里，我已经尝试物理填充数组并且可以，但它没有'当我从 firebase 获取数据时.我确实看到我在控制台日志中获取了数据，但没有显示出来.

I'm trying to display a bunch of data i have on firebase in a flatlist, I don't really know where the problem is right now, i've tried physically filling the array out and that works but it doesn't when i get the data from firebase. I do see that im getting the data on the console log but it's not getting displayed.

function Squad() {
  const gk = [];

  db.collection('squad').orderBy('position').get().then(snapshot => {
    snapshot.forEach(doc => {
      const playerObject = doc.data();
      gk.push({name: playerObject.name, number: playerObject.number});
      console.log(gk);
    });
  });

  const Item = ({ name, number }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{number} - {name}</Text>
    </View>
  );

  const renderItem = ({ item }) => (
    <Item name={item.name} number={item.number} />
  )

  return(
    <View>
      <View style={styles.bar}>
        <Text style={styles.barText}>goalkeeper</Text>
      </View>
      <FlatList 
        data={gk}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  )
}

推荐答案

首先创建一个 useEffect 钩子作为 componentWillMount 函数，在组件准备好时调用该方法.我还包含了 catch 块 以显示可能发生的任何错误.

Start by creating a useEffect hook to act as a componentWillMount function to call the method when the compnent is ready. I have also included catch block in order to show any errors that might occur.

import React, { useState, useEffect } from "react";

const Squad = () => {
  const [gk, setGK] = useState([]);

  useEffect(() => {
    getSquadData();
  });

  const getSquadData = () => {
    db.collection("squad")
      .orderBy("position")
      .get()
      .then((snapshot) => {
        let myData = [];
        snapshot.forEach((doc) => {
          const playerObject = doc.data();
          myData.push({
            id: playerObject.id,
            name: playerObject.name,
            number: playerObject.number,
          });
        });
        setGK(myData);
      })
      .catch((error) => {
        console.log("Error getting data: ", error);
      });
  };

  const Item = ({ name, number }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>
        {number} - {name}
      </Text>
    </View>
  );

  const renderItem = ({ item }) => (
    <Item name={item.name} number={item.number} />
  );

  return (
    <View>
      <View style={styles.bar}>
        <Text style={styles.barText}>goalkeeper</Text>
      </View>
      <FlatList
        data={gk}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

export default Squad;

因此，如果您在控制台中看到错误日志，请检查您在 Firestore 中的集合，并检查您的 Firestore 中的规则.

So if you are seeing error logs in your console, check your collection in firestore, and also check the rules in your firestore.

这篇关于在平面列表上显示 firebase 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！