使用.then()函式時async/await try/catch未按預期作業

我正在使用 react 處理一個專案，如果注冊成功，我需要重定向到登錄頁面，所以我添加了一個名為重定向的狀態，當您訪問我需要設定的注冊表時為空，以便頁面可以重定向，因為我使用了一個處理程式，這是相關的組件代碼：

    class Registro extends Component {
        constructor() {
            super();
            this.state = {
                email: "",
                password: "",
                passwordConfirm: "",
                userName: "",
                redirect: "",
            };
        }
    handleRedirect = () => {
        this.setState({ redirect: "/aplicacion" });
        console.log(this.state);
    }
  render() {
        if (this.state.redirect) {
            return <Navigate to={this.state.redirect} />
          }
        
        return (
          <button id="submit" className="btn btn-outline-accesible col-3 m-2 mt-3" 
                 onClick={() => {
                 registerWithEmailAndPassword(this.state.userName, this.state.email, this.state.password).then(
                      handleRedirect() 
                 )}}>Acceder</button>

用郵箱和密碼注冊就是這個功能：

    const registerWithEmailAndPassword = async (name, email, password) => {
    try {
        console.log(name, email, password)
      const res = await createUserWithEmailAndPassword(auth, email, password);
      const user = res.user;
      await setDoc(doc(db, "users", email), {
        email: email,
        nombre: name,
        pass: password
      });
      alert("Registro completado con éxito")
    } catch (err) {
      console.error(err);
      alert(err.message);
    }
  };

預期的結果是，如果注冊成功，頁面會重新加載，您可以繼續愉快地作業，但是如果出現錯誤，頁面將不會加載，并且會向用戶警告錯誤。發生的情況是，如果出現錯誤，頁面會重定向您，然后向您顯示帶有錯誤資料的警報。

感謝您閱讀并與我一起思考。

uj5u.com熱心網友回復：

混合方法下的想法是什么？

這應該作業

class Registro extends Component {
  render() {
    if (this.state.redirect) {
      return <Navigate to={this.state.redirect} />;
    }

    return (
      <button
        id="submit"
        className="btn btn-outline-accesible col-3 m-2 mt-3"
        onClick={this.handleClick}
      >
        Acceder
      </button>
    );
  }

  handleClick = async () => {
    try {
      await registerWithEmailAndPassword(
        this.state.userName,
        this.state.email,
        this.state.password
      );
      handleRedirect();
    } catch (err) {
      console.error(err);
      alert(err.message);
    }
  };
}

const registerWithEmailAndPassword = async (name, email, password) => {
  console.log(name, email, password);
  const res = await createUserWithEmailAndPassword(auth, email, password);
  const user = res.user;
  await setDoc(doc(db, "users", email), {
    email: email,
    nombre: name,
    pass: password,
  });
  alert("Registro completado con éxito");
};

更新： 請注意，registerWithEmailAndPassword還根據請求進行了更新以支持正確的錯誤處理

uj5u.com熱心網友回復：

你的registerWithEmailAndPassword函式是async，所以它回傳一個Promise。在這個函式中，你呼叫另一個異步函式，然后等待它的回應。您正在捕獲setDoc. 所以你registerWithEmailAndPassword 總是解決。你可以做的是：

• 如果函式成功則回傳一些東西
• 發生錯誤時回傳被拒絕的 Promise

const registerWithEmailAndPassword = async (name, email, password) => {
    try {
        console.log(name, email, password)
      const res = await createUserWithEmailAndPassword(auth, email, password);
      const user = res.user;
      await setDoc(doc(db, "users", email), {
        email: email,
        nombre: name,
        pass: password
      });
      alert("Registro completado con éxito")
      return true
    } catch (err) {
      console.error(err);
      alert(err.message);
      return Promise.reject(false);
    }
};

標籤：javascript 反应

上一篇：使用可選鏈接后。問題JSON中位置0的意外標記u

下一篇：如何從reactJS中的firebase存盤桶檔案夾查看所有影像