使用我的 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> ) }