無法讀取 null 的屬性“#”反應

Question

我很陌生，我試圖從 firebase 數據庫加載個人資料圖片。 即使該屬性不是 null 它一直說 TypeError: Cannot read property 'pfpUrl' of null。

 import React from "react" import { NavLink } from "react-router-dom"; import { useState, useEffect } from "react" import firebase from "firebase"; import fire from "./firebase" import { useHistory } from "react" function Header(){ const [pfp, setPfp] = useState(null) const [userID, setUserID] = useState(null); firebase.auth().onAuthStateChanged((user)=>{ if(user){ setUserID(user.uid) firebase.database().ref("users/"+userID+"/public/profile/pic").on("value", (snapshot)=>{ setPfp(snapshot.val().pfpUrl) }) }else{ } }) function signOut(){ firebase.auth().signOut().then(()=>{ console.log("successfully signout") }) } return( <header> <div id = "hd-container"> <div id = "logo-contain"> <NavLink to = "/"><h1>Logo</h1></NavLink> </div> <div id ="search"> <div className = "bar"> <input id = "searchBar" placeholder = "search"></input> </div> <div className = "searchBtn"> <button id = "srhBtn">Search</button> </div> </div> <div id = "buttons"> <div className = "profile"> <NavLink to = {"users/"+userID}><img src = {pfp} height = "50" width = "50" /></NavLink> </div> <div className = "signout"> <button onClick = {signOut}>Sign Out</button> </div> </div> </div> </header> ) } export default Header;

即使加載了個人資料圖片，錯誤仍然不斷出現，有什么解決辦法嗎？

Answer 1

您對setUserID(user.uid)的使用不會立即導致userID變量包含新值。 它只會在組件下一次呈現時包含該新值（而不是這次它即將呈現）。

如果要在數據庫查詢中立即使用用戶的 UID，則需要在本地使用它的值。

const uid = user.uid
setUserID(uid)
firebase.database().ref("users/"+ uid +"/public/profile/pic").on("value", (snapshot)=>{
    setPfp(snapshot.val().pfpUrl)
})

看到uid是一個局部變量，它的值可以立即在查詢中使用。

Answer 2

首先，您需要在useEffect中執行您的代碼，因為每當您設置 state 時，api 將繼續觸發 api 調用。 請參閱下面的代碼並嘗試在控制台中顯示您的值以驗證它來自后端。

useEffect(() => {
    firebase.auth().onAuthStateChanged((user)=>{
            if(user){
                setUserID(user.uid)
                firebase.database().ref("users/"+user.uid+"/public/profile/pic").on("value", (snapshot)=>{
                    setPfp(snapshot.val().pfpUrl)
                })
            }else{
                
            } 
        })
}, [])