在平面列表上显示 Firebase 数据

Question

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

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

Answer 1

您可以在异步函数中获取有关挂载的信息，然后使用钩子将其存储在有状态数组中。

function Squad() {
  const [gk, setGk] = useState([]);

  const getSquad = async () => {
    const ref = db.collection('squad').orderBy('position');
    const doc = await ref.get();
    const playerObject = doc.data();
    const newGk = [...gk, {name: playerObject.name, number: playerObject.number}];
    setGk(newGk);
  }

 useEffect(() => {
  getSquad();
 }, [])

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

Answer 2

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

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 中的规则。