React/firebase：在 jsx 中显示错误消息

Question

我很乐意得到任何帮助。 我想在 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>

Answer 1

你可以试试下面的代码，它已经从 createUserWithEmailAndPassword.then 转移到 await createUserWithEmailAndPassword 和一个 try catch 块，试一试。

    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>