Firebase 實時數據庫在 React Native 中返回一個空數組

Question

我在使用 Firebase 方面經驗不足，如果某些代碼很笨，請提前致歉。

我正在嘗試從 firebase 的實時數據庫中呈現數據。當我嘗試將數據傳遞給 useState 常量以及嘗試 console.log useState 變量時出現問題，它返回一個空數組。

這是我正在使用的代碼：

import { StyleSheet, Text, View } from "react-native";
import Contador from "../components/Partida/Contador";
import { database } from "../src/config/fb";
import {
  collection,
  getDocs,
} from "firebase/firestore";
import { useEffect, useState } from "react";
const Partida = () => {
  const [datos, setDatos] = useState([]);

  const retrieveDocs = async () => {
    try {
      const matchCol = collection(database, "Partida");
      const data = await getDocs(matchCol);
      const result = data.docs.map(doc => doc.data());
      setDatos(result);
      console.log(datos);
    } catch (e) {
        console.log(e);
    }
    
  };

  useEffect(() => {
    retrieveDocs();
  }, []);
  return (
    <View style={styles.pantalla}>
      <Text></Text>
      <Contador />
      <Contador />
    </View>
  );
};

const styles = StyleSheet.create({
  pantalla: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Partida;

問題是，當我更新這段代碼時，它從開始讀取文件並在控制台上給我一個正確的日志，所以在某種程度上我明白問題出在哪里，但我不知道如何解決它。

Answer 1

每次您對代碼進行更改時，都會呈現屏幕，從而導致調用useEffect掛鈎並再次檢索文檔。 這是預期的行為，類似於用戶重新啟動應用程序時發生的情況。