[英]I'm having a lot of issues after signing up for Firebase auth with my email and password. When I use that method,
My navigation bar no longer works.and my web application crashes.我的导航栏不再有效。我的 web 应用程序崩溃了。 This is the signup form code.
这是注册表单代码。 I'm taking the user name, email address, and password here.
我在这里输入用户名、email 地址和密码。 When I click the signup button, it takes me to my profile page, but when I try to return to the home page, it crashes.
当我单击注册按钮时,它会将我带到我的个人资料页面,但当我尝试返回主页时,它崩溃了。 After a few minutes, I was stuck with the page not responding.
几分钟后,我陷入了页面无响应的状态。 Could you please tell me what I'm doing wrong?
你能告诉我我做错了什么吗?
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
I'm attempting to change the navigation bar so that if the user signs in, the navigation options should be Home, Signup, and Account, but if the user does not sign in, the navigation options are only Home, Signup, and Login.我正在尝试更改导航栏,以便如果用户登录,导航选项应为“主页”、“注册”和“帐户”,但如果用户未登录,则导航选项仅为“主页”、“注册”和“登录”。
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
When my project was small, this did not happen, but now that it is larger and has more pages, when users log in, my website becomes stuck and does not respond.我的项目小的时候不会出现这种情况,现在大了,页面多了,用户登录的时候,我的网站就卡住了,没有反应。 I want it to work as smoothly as it did before logging in. Please assist me;
我希望它能像登录前一样顺畅地工作。请帮助我; I've been trying to fix it for a week now.
我已经尝试修复它一个星期了。
User createContext hook everything will be fine.用户 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> ) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.