如何暫停渲染直到在反應中獲取數據

Question

我是新手，遇到了這個問題。

 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”，我該如何解決？

Answer 1

您應該使用 state 作為userId而不是 scope 變量。

const [userID, setUserID] = useState(null)

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