Блог

Главная - Вопросы по программированию - Не удается прочитать свойство “#” нулевой реакции

Не удается прочитать свойство “#” нулевой реакции

#javascript #reactjs #firebase #firebase-realtime-database #firebase-authentication

# #javascript #reactjs #firebase #firebase-realtime-database #firebase-аутентификация

Вопрос:

Я очень новичок в react, и я пытался загрузить изображение профиля из базы данных firebase. Даже если свойство не равно null, оно продолжает говорить TypeError: не удается прочитать свойство ‘pfpUrl’ 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;

Даже при загрузке изображения профиля ошибка продолжает появляться, какое-либо исправление?

Ответ №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 это локальная переменная, значение которой может быть использовано немедленно в запросе.

Ответ №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{
                
            } 
        })
}, [])