无法读取 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>即使加载了个人资料图片，错误仍然出现，有解决办法吗？

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{

                

            } 

        })

}, [])