使用React+Firebase9实现用户注册完成后调用多个函数报错如何解决

现有代码的核心错误 #

• 语法错误：then()回调函数写完后缺少闭合括号，会直接导致编译报错
• 逻辑错误：你要实现的是注册功能，却调用了登录API signInWithEmailAndPassword，注册应该用Firebase Auth v9的createUserWithEmailAndPassword方法
• 传参错误：触发signUpSubmit的表单提交事件没有传入closeSignUpCard和openSignInCard两个回调函数，导致函数执行时访问不到这两个变量

可行实现方案 #

方案1：修正原有传参写法 #

第一步：修复signUpSubmit函数逻辑

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "你的firebase配置文件路径";

const signUpSubmit = (e, closeSignUpCard, openSignInCard) => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;

  // 改用注册专属API
  createUserWithEmailAndPassword(auth, email, password)
    .then(() => {
      closeSignUpCard();
      openSignInCard();
    }) // 补充这里缺失的闭合括号
    .catch((error) => {
      alert(error.message);
    });
};

第二步：表单提交时传入回调参数

在React组件的表单绑定处传入两个控制弹窗的函数即可：

// 组件内定义的两个控制方法
const closeSignUpCard = () => setShowSignUp(false);
const openSignInCard = () => setShowSignIn(true);

// 表单提交绑定，将两个函数作为参数传入
return (
  <form onSubmit={(e) => signUpSubmit(e, closeSignUpCard, openSignInCard)}>
    <input name="email" type="email" required />
    <input name="password" type="password" required />
    <button type="submit">完成注册</button>
  </form>
)

方案2：更简洁的组件内写法（无需传参） #

如果signUpSubmit直接定义在组件内部，可以直接调用组件内的方法，不需要额外传参：

import { useState } from "react";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "你的firebase配置文件路径";

const AuthComponent = () => {
  const [showSignUp, setShowSignUp] = useState(true);
  const [showSignIn, setShowSignIn] = useState(false);

  const closeSignUpCard = () => setShowSignUp(false);
  const openSignInCard = () => setShowSignIn(true);

  // 不用接收额外参数，直接调用组件内方法
  const signUpSubmit = async (e) => {
    e.preventDefault();
    const email = e.target.email.value;
    const password = e.target.password.value;
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      closeSignUpCard();
      openSignInCard();
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <form onSubmit={signUpSubmit}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">完成注册</button>
    </form>
  )
}

内容的提问来源于stack exchange，提问作者abdhul gaffur