react/firebase:在JSX中显示错误消息

发布于 2025-02-13 04:54:36 字数 1738 浏览 0 评论 0原文

我很乐意获得任何帮助。我想在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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小姐丶请自重 2025-02-20 04:54:36

您可以尝试以下代码,它已从CreateUserWitheMailandPassword。到等待CreateUserWitheMailandPassword和一个尝试捕获块,请尝试一下。

    const [validation, setValidation] = useState("");
    
    async function signUp(name, email, password) {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
 const user = userCredential.user; 
            const docRef = doc(allUsers, user.uid);
            await setDoc(docRef, { name: name, email: email });
          //add user to database

} catch(error) {
   if (error.code == "auth/email-already-in-use") {
              setValidation("The email address is already in use");
              // alert();
          
            } else if (error.code == "auth/invalid-email") {
              setValidation("The email address is not valid.");
               
            } else if (error.code == "auth/operation-not-allowed") {
              setValidation("Operation not allowed.");
            } else if (error.code == "auth/weak-password") {
              setValidation("The password is too weak.");
            }
}
        
    
      }
    
     const handleSignUp = async (e) =>{ 
        e.preventDefault()
        setValidation("");
        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>

You can try below code, It has shifted from createUserWithEmailAndPassword.then to await createUserWithEmailAndPassword and a try catch block, give it a try.

    const [validation, setValidation] = useState("");
    
    async function signUp(name, email, password) {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
 const user = userCredential.user; 
            const docRef = doc(allUsers, user.uid);
            await setDoc(docRef, { name: name, email: email });
          //add user to database

} catch(error) {
   if (error.code == "auth/email-already-in-use") {
              setValidation("The email address is already in use");
              // alert();
          
            } else if (error.code == "auth/invalid-email") {
              setValidation("The email address is not valid.");
               
            } else if (error.code == "auth/operation-not-allowed") {
              setValidation("Operation not allowed.");
            } else if (error.code == "auth/weak-password") {
              setValidation("The password is too weak.");
            }
}
        
    
      }
    
     const handleSignUp = async (e) =>{ 
        e.preventDefault()
        setValidation("");
        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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文