reactjs React+vite项目显示空白屏幕[已关闭]

kokeuurv  于 2023-08-04  发布在  React
关注(0)|答案(1)|浏览(154)

**已关闭。**此问题需要debugging details。它目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答这个问题。
昨天关门了。
Improve this question
我写了一个聊天程序,使用firebase作为数据库。我使用的是react路由器,因为我有很多页面,我想显示,一切都工作完美,直到今天。我唯一改变的是“聊天”组件。但它不应该影响整个应用程序。我认为问题出在“AuthContext”组件上,但我不明白为什么我没有得到任何控制台错误。
这里是我的主.jsx

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {
    createBrowserRouter,
    RouterProvider,Navigate
} from "react-router-dom";
import Login from "./Login/Login.jsx";
import Chat from "./Chat/Chat.jsx";

import Register2 from "./Register/Register2.jsx";
import Register3 from "./Register/Register3.jsx";
import {AuthProvider} from "./Authentication/AuthContext.jsx";
import PrivateRoute2 from "./PrivateRoute/PrivateRoute2.jsx";
import PrivateRoute from "./PrivateRoute/PrivateRoute.jsx";
import Update from "./Update/Update.jsx";



const router = createBrowserRouter(    [{
        path: "/login",
        element: <PrivateRoute> <Login/> </PrivateRoute>,
    },
    {
        exactPath: "/",
        element: <PrivateRoute2> <App/> </PrivateRoute2> ,
    },
    {
        path: "/chat",
        element: <PrivateRoute2> <Chat /> </PrivateRoute2>,
    },
    {
        path:"/register",
        element: <Register2 />,
    },
    {
        path:"/update",
        element: <PrivateRoute2> <Update /> </PrivateRoute2>
    },
    {
        path:"/name",
        element: <PrivateRoute2> <Register3 /> </PrivateRoute2>,
    },
    {
        index:true,
        element: <Navigate to="/login" />,
    }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
        <AuthProvider>
            <RouterProvider router={router} />
        </AuthProvider>
)

字符串
这是我的AuthContext

import {auth, usersCollection} from "../Firebase.js";
import {signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
import {createContext, useContext, useEffect, useState} from "react";
import { getDocs, query, where} from "firebase/firestore";

const AuthContext = createContext()

export function useAuth(){
    return useContext(AuthContext)
}

export function AuthProvider({children}){

    const [loading,setLoading] = useState(true)
    const [user,setUser] = useState()
    const [user_cloud,setUserCloud] = useState()

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(async user => {
            if (user){
                setUser(user)
                const user_ref = query(usersCollection, where("UID", "==", user.uid));
                setUserCloud(await getDocs(user_ref))
                setLoading(false)
            }

        })
        return unsubscribe
    })

    function login(email,password){
         return signInWithEmailAndPassword(auth,email,password)
    }

    function signUp(email,password){
        return createUserWithEmailAndPassword(auth,email,password)
    }

    function logOut(){
        return signOut(auth)
    }

    const value = {
        user,
        user_cloud,
        login,
        signUp,
        logOut
    }

    return (
        <AuthContext.Provider value={value}>
            {!loading && children}
        </AuthContext.Provider>
    )

}


我想我可能知道原因了。昨晚我用我的一个用户登录了应用程序,然后没有注销,我去了“/登录”,登录到另一个用户。在此之后,我删除了所有的数据从firebase.这可能是完全无关的,虽然
项目也未部署

w1e3prcc

w1e3prcc1#

好吧,因为我使用回调函数调用useEffect内部的async函数在“AuthContext”程序等待setUserCloud(await getDocs(user_ref))被执行,因为我删除了所有的用户从我的firebase它没有加载。简单的if else语句足以解决问题。
AuthContext

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
        if (user) {
            setUser(user);
            const user_ref = query(usersCollection, where("UID", "==", user.uid));
            setUserCloud(getDocs(user_ref));
            setLoading(false);
        } else {
            // User is not authenticated, handle it accordingly
            setUser(null);
            setUserCloud(null);
            setLoading(false);
        }

    })
    return unsubscribe
},[])

字符串

相关问题