在渲染反应钩子之前获取 firebase 数据

Question

我对 javascript 和 React 比较陌生，我正在帮助一个项目。 我想为登录用户创建个人资料页面，其中包含存储在 firebase 实时数据库中的信息。 但是该组件未呈现，并且控制台显示“未捕获的类型错误：无法读取 null 的属性（读取“用户名”）”。 我猜这是因为在渲染之前没有从数据库中获取数据。 数据存在。 轮廓挂钩 -

import React, { useEffect,useState } from 'react';
import {useAuth} from '../contexts/AuthContext'
import { getDatabase,ref, onValue} from "firebase/database";


function Profile(){

    const  [userData, setUserData] = useState({});
    const currentUser = useAuth();

    useEffect(()=>{ putData()
    },[])
    
    async function putData(){

    let db =  getDatabase();    
    let refd = ref(db,'users/'+ currentUser.currentUser.uid );
    
    onValue(refd, (snapshot) => {
    console.log(snapshot.val());       
    setUserData(snapshot.val());      
    }, 

    (errorObject) => {
    console.log('The read failed: ' + errorObject.name);
    })
    }

    return(

        <div>
        <h3>Username : {userData.username}</h3>
        <h3>Institute name : {userData.institute_name}</h3>
        <h3>Accomodation : {userData.accomodation}</h3>
        <h3>Phone no. : {userData.phone}</h3>
        <h3>Email : {userData.email}</h3>
        </div>
     );
}            
export default Profile;

问题出在“onValue”部分还是反应部分？ Firebase 文档对我目前的理解没有帮助。 任何有关如何实现这一点的帮助表示赞赏。

Answer 1

useEffect(() => {
try {
  //getting previously saved data
  // console.log({ SelectedCaseDetails });
  const getData = async () => {
    const docRef = doc(
      db,
     "here comes your path to your document"
    );
    const docSnap = await getDoc(docRef);
    console.log("data -->", docSnap.data());
    if (docSnap.exists()) {
      setData(docSnap.data());
      setData(() => ({ ...docSnap.data() }));
    }
  };
  getData();
} catch (error) {
  console.log({ error });
}


 }, []);

您只需在页面加载时运行的 useEffect 中运行获取数据 function

希望这可以帮助

¯\ (ツ) /¯