无法读取null react的属性"#"

Question

我刚开始反应，我正试图从firebase数据库加载配置文件图片。即使属性不为null，它也会一直说TypeError:无法读取null的属性"pfpUrl"。

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中执行代码，因为无论何时设置状态，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{

} 
})
}, [])