使用我的 email 和密碼注冊 Firebase 身份驗證后，我遇到了很多問題。 當我使用那個方法時，

Question

我的導航欄不再有效。我的 web 應用程序崩潰了。 這是注冊表單代碼。 我在這里輸入用戶名、email 地址和密碼。 當我單擊注冊按鈕時，它會將我帶到我的個人資料頁面，但當我嘗試返回主頁時，它崩潰了。 幾分鍾后，我陷入了頁面無響應的狀態。 你能告訴我我做錯了什么嗎？

import React, { useState } from "react";
import Label from "../../Form/Label"
import Input from "../../Form/input"
import Form from "../../Form/Form";
import { auth, } from "../../../../FireBase/Firebase"
import { createUserWithEmailAndPassword, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth"

import { useNavigate } from "react-router";
import LoginOption from "../../MainPage/LoginOption/LoginOption";
const SignupForm = () => {
    const [isDisply, setDisplay] = useState(false)
    const [isEmail, setEmail] = useState(false)
    const [isPassword, setPassword] = useState(false)
    const [isName, setName] = useState(false)
    const Navigate = useNavigate();
    const newUser = {
        Name: '',
        Email: '',
        Password: ''
    };
    const CreateNewUser = () => {
        createUserWithEmailAndPassword(auth, newUser.Email, newUser.Password)
            .then((userCredential) => {
                const user = userCredential.user;
                console.log(user)
                Navigate("/user")
            }).catch((error) => {
                console.log(error)
                const errorM = error.massage
                setEmail(true)
            })
    }

    const changeHandler = (event) => {
        event.preventDefault()

        const password = event.target[2].value
        const rpassword = event.target[3].value
        // console.log(password, rpassword)
        if (password === rpassword) {
            newUser.Name = event.target[0].value
            newUser.Email = event.target[1].value
            newUser.Password = password
            CreateNewUser()
        }
        else {
            // console.log("PassWord Wrong")
            setDisplay(!isDisply)
        }
    }
    const OnChangeInput = (e) => {
        e.preventDefault()
        const { value, name } = e.target
        switch (name) {
            case "fullName":
                if (value === "") {
                    setName(true)
                }
                else {
                    setName(false)
                }
                break;
            case "email":
                if (value === "") {
                    setEmail(true)
                }
                else {
                    setEmail(false)
                }
                break;
            default:
                console.log("Wrong")
                break;
        }
    }
    // onAuthStateChanged(auth, (user) => {
    //     console.log(user)
    // })
    // console.log(isUser)

    return (
        <Form submit={changeHandler}>
            <div className="lable-text">
                <Label for="fullName" name=" Name" />
                <Input type="text" name="fullName" placeholder="Enter your Name" onChange={OnChangeInput} />
                <div className="animated bounce" style={{ display: isName ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Please Enter your Name </span>
                </div>
                <Label for="email" name=" Email" />
                <Input type="email" name="email" placeholder="Enter your Email" onChange={OnChangeInput} />
                <div className="animated bounce" style={{ display: isEmail ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Please Enter valid email Address </span>
                </div>
                <Label for="cPassword" name=" Create New Password" />
                <Input type="password" name="cPassword" placeholder="Enter your paaword" />
                <div className="animated bounce" style={{ display: isDisply ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Password does not match </span>
                </div>
                <Label for="tPassword" name=" Type again  password" />
                <Input type="password" name="tPassword" placeholder="Password" />
            </div>
            <div className="d-flex justify-content-center">
                <button className="btn btn-primary" type="submit"> Sign Up</button>
            </div>
            <LoginOption />
        </Form>
    )

}



export default SignupForm

我正在嘗試更改導航欄，以便如果用戶登錄，導航選項應為“主頁”、“注冊”和“帳戶”，但如果用戶未登錄，則導航選項僅為“主頁”、“注冊”和“登錄”。

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { NavLink } from 'react-router-dom';
import { auth } from "../../../FireBase/Firebase"
import { useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
const NavList = (props) => {

    let [user, setUser] = useState(false)
    const ChangeAuthHandler = () => {
        onAuthStateChanged(auth, (user) => {
            const uid = user.uid
            if (uid) {
                setUser(!user)
            }
            else {
                setUser(false)
            }
        })
    }
    ChangeAuthHandler()
    if (user === false) {

        return (

            <ul className="navbar-nav  justify-content-center text-center  ">
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link active fw-bold m-1 text-primary " to="user">Home</NavLink>
                </li>
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="user/signup">Sign Up</NavLink>
                </li>
                <li className="nav-item NavLink text-primary m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="user/login">Sign In</NavLink>
                </li>
            </ul>
        )
    }
    else {
        return (

            <ul className="navbar-nav  justify-content-center text-center  ">
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link active fw-bold m-1 text-primary " to="/user">Home</NavLink>
                </li>
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" onClick={props.click}>Sign out</NavLink>
                </li>
                <li className="nav-item NavLink text-primary m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="/user/profile">Account</NavLink>
                </li>
            </ul>
        )
    }

}
export default NavList

我的項目小的時候不會出現這種情況，現在大了，頁面多了，用戶登錄的時候，我的網站就卡住了，沒有反應。 我希望它能像登錄前一樣順暢地工作。請幫助我； 我已經嘗試修復它一個星期了。

Answer 1

用戶 createContext 掛鈎一切都會好起來的。

 import React, { createContext, useEffect, useState, useContext } from "react"; import { auth } from "../FireBase/Firebase" import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth"; const AuthContext = createContext() export function useAuth() { return useContext(AuthContext) } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState() const [isLoading, setLoading] = useState(true) function signup(email, paaword) { return createUserWithEmailAndPassword(auth, email, paaword) } function login(email, password) { return signInWithEmailAndPassword(auth, email, password) } useEffect(() => { const unsubscriber = auth.onAuthStateChanged(user => { setCurrentUser(user) setLoading(false) }) return unsubscriber }, []) const value = { currentUser, signup } return ( <AuthContext.Provider value={value}> {.isLoading && children} </AuthContext.Provider> ) }