react/firebase:在JSX中显示错误消息
我很乐意获得任何帮助。我想在JSX中显示身份验证消息,但到目前为止,我只能发出警报。我想在handlesignup内部使用catch块实现usestate(),某种原因handlesignup从未设法捕获错误。这是我功能的当前状态。
const [validation, setValidation] = useState("");
async function signUp(name, email, password) {
createUserWithEmailAndPassword(auth, email, password)
//add user to database
.then(async (userCredential) => {
const user = userCredential.user;
const docRef = doc(allUsers, user.uid);
await setDoc(docRef, { name: name, email: email });
})
.catch((error) => {
if (error.code == "auth/email-already-in-use") {
alert("The email address is already in use");
} else if (error.code == "auth/invalid-email") {
alert("The email address is not valid.");
} else if (error.code == "auth/operation-not-allowed") {
alert("Operation not allowed.");
} else if (error.code == "auth/weak-password") {
alert("The password is too weak.");
}
} );
}
const handleSignUp = async (e) =>{
e.preventDefault()
if((pwdRef.current.value.length|| pwdConfirmRef.current.value.length)<6){
setValidation("Le mot de passe doit contenir 6 caractères minimum ")
return
}
if(pwdRef.current.value !== pwdConfirmRef.current.value){
setValidation("Les mots de passe saisis ne correspondent pas")
return
}
await signUp(nameRef.current.value, emailRef.current.value, pwdRef.current.value);
formRef.current.reset();
}
//JSX
<form ref={formRef} onSubmit = {handleSignUp}>
.........
<p className="validation">{validation}</p>
</form>
I would be happy to get any help. I would like to show authentication message in jsx but so far I am only able to throw alerts. I wanted to implement useState() with catch block inside handleSignUp a some reason handleSignUp never manages to catch errors. Here is the current state of my functions.
const [validation, setValidation] = useState("");
async function signUp(name, email, password) {
createUserWithEmailAndPassword(auth, email, password)
//add user to database
.then(async (userCredential) => {
const user = userCredential.user;
const docRef = doc(allUsers, user.uid);
await setDoc(docRef, { name: name, email: email });
})
.catch((error) => {
if (error.code == "auth/email-already-in-use") {
alert("The email address is already in use");
} else if (error.code == "auth/invalid-email") {
alert("The email address is not valid.");
} else if (error.code == "auth/operation-not-allowed") {
alert("Operation not allowed.");
} else if (error.code == "auth/weak-password") {
alert("The password is too weak.");
}
} );
}
const handleSignUp = async (e) =>{
e.preventDefault()
if((pwdRef.current.value.length|| pwdConfirmRef.current.value.length)<6){
setValidation("Le mot de passe doit contenir 6 caractères minimum ")
return
}
if(pwdRef.current.value !== pwdConfirmRef.current.value){
setValidation("Les mots de passe saisis ne correspondent pas")
return
}
await signUp(nameRef.current.value, emailRef.current.value, pwdRef.current.value);
formRef.current.reset();
}
//JSX
<form ref={formRef} onSubmit = {handleSignUp}>
.........
<p className="validation">{validation}</p>
</form>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以尝试以下代码,它已从CreateUserWitheMailandPassword。到等待CreateUserWitheMailandPassword和一个尝试捕获块,请尝试一下。
You can try below code, It has shifted from createUserWithEmailAndPassword.then to await createUserWithEmailAndPassword and a try catch block, give it a try.