如何暂停渲染，直到在反应中获取数据答案

【问题标题】：How to pause render until the data is fetched in react如何暂停渲染，直到在反应中获取数据
【发布时间】：2020-12-03 16:48:35
【问题描述】：

我是新手，遇到了这个问题。

import React from "react";
import firebase from "firebase";
import fire from "./firebase"
import { Route, BrowserRouter as Router, Switch, Redirect, useHistory, NavLink } from 'react-router-dom';
import Header from "./header"
import Nav from "./nav"
import data from "./data"
function Home(){
    let userID;
    let userName;
    let logg;
    const history = useHistory();
    firebase.auth().onAuthStateChanged((user)=>{
        if(user){
            userID = user.uid
        }else{
            history.push("/login")
        } 
    })
    
    return(
        <>
        <Header />
        <Nav />
        <div id = "home" className ="main">
            <div class = "headingCont">
                <h1>This is home</h1>
                <NavLink to = {"users/"+userID}><p>Your Profile</p></NavLink>
            </div>
        </div>
        </>
    )
    
}
export default Home

我正在从 firebase 获取用户 ID，但它会快速呈现 jsx，因此 userID 的值仍未定义。因此，当我单击您的个人资料时，它会转到用户/未定义而不是用户/“用户 ID” 我该如何解决？

【问题讨论】：

加载时可以显示加载器

标签： javascript reactjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

您应该为userId 使用状态而不是范围变量。

const [userID, setUserID] = useState(null)

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    setUserID(user.uid)
  } else {
    history.push('/login');
  }
});

【讨论】：

不客气。如果可行，请勾选我的答案。