为什么页面刷新时firebase的实时数据库不加载数据

Question

我正在将 Firebase 实时数据库用于我正在使用 React 开发的站点。 在 useEffect 方法中，我使用 Firebase 的 get 方法从数据库接收所有数据，当我从主页切换回显示数据的页面时它可以工作，但刷新页面时它不起作用. 我尝试过使用异步等待 function，console.logging 我能想到的一切，并重写整个代码。

这是我的 useEffect 方法，它获取以前保存到数据库的输入。 如果我从“日志”路由器页面切换到主页并返回，它会正确加载，但如果我刷新页面，它不会正确加载。 当我刷新时，它 console.logs 'No Data' 但我知道数据存在，因为当我在路由器页面之间切换时它会加载。

useEffect(() => {
        const dbRef = ref(getDatabase())
        
        //Fetches dreams from firebase's database
        get(child(dbRef, `/${user.uid}/dreams`)).then(snapshot => {
            if (snapshot.exists()){
                const dreams = snapshot.val()
                Object.values(dreams).forEach(dream => {
                    setUserDreams(prev => [...prev, dream])
                })
            } else {
                console.log('No Data')
            }
        }).catch(err => {
            console.error(err);
        })
...
}, [])

数据库的JSON结构基本是这样的

"USER_ID" : {
    "dreams" : [{"RANDOM_UUID" : {...}}],
    "tags" : [{"RANDOM_UUID" : {...}}]
}

用户 ID 是 firebase 在其用户身份验证功能中生成的 uid，它不会更改，随机 uuid 是从 firebase uuidv4 方法生成的随机字符串。

这是用户变量的填充方式：

import {createContext, useContext, useEffect, useState} from 'react'
import {
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
    signOut,
    updateProfile,
    onAuthStateChanged
} from 'firebase/auth';
import { auth } from '../firebase-config';

const UserContext = createContext();

export const AuthContextProvider = ({children}) => {
    const [user, setUser] = useState({})

    const createUser = (email, password) => {
        return createUserWithEmailAndPassword(auth, email, password);
    }

    const updateUsername = (username) => {
        return updateProfile(auth.currentUser, {
            displayName: username
        })
    }

    const signIn = (email, password) => {
        return signInWithEmailAndPassword(auth, email, password);
    }

    const logout = () => {
        return signOut(auth);
    }

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            console.log(currentUser)
            setUser(currentUser)
        })
        return () => {
            unsubscribe()
        }
    }, [])

    return (
        <UserContext.Provider value={{createUser, user, logout, signIn, updateUsername}}>
            {children}
        </UserContext.Provider>
    )
}

export const UserAuth = () => {
    return useContext(UserContext)
}

Answer 1

对不起，如果这有点奇怪，但我发现了这个问题。 在我的日志文件中记录用户变量后，我了解到它直到运行useEffect之后才会填充，所以我只是将user作为依赖变量放在我的 useEffect 钩子中，所以它会等到它被填充以运行该钩子。

useEffect(() => {
        const dbRef = ref(getDatabase())
        
        //Fetches dreams from firebase's database
        get(child(dbRef, `/${user.uid}/dreams`)).then(snapshot => {
            if (snapshot.exists()){
                const dreams = snapshot.val()
                Object.values(dreams).forEach(dream => {
                    setUserDreams(prev => [...prev, dream])
                })
            } else {
                console.log('No Data')
            }
        }).catch(err => {
            console.error(err);
        })
...
}, [user])

这是有效的，唯一改变的是依赖数组。 意思是，在useEffect挂钩运行后填充了user变量，这让我遇到了问题。 感谢帮助我的评论者！