React集成Firebase注册时报TypeError: a.preventDefault is not a function如何解决

错误原因 #

核心错误是你把事件回调和Redux action生成器的逻辑混用在了同一个loginToDo函数中：

1. 点击「SignIn」按钮触发loginToDo时，传入的参数是事件对象，自带preventDefault方法，这一步调用是正常的
2. 注册成功后你调用loginToDo传入用户信息对象，再传入dispatch时，此时loginToDo接收的参数是你构造的用户对象，没有preventDefault方法，调用直接抛出类型错误

解决方案 #

• 拆分两个不同功能的函数，不要混写

// 专门处理表单提交，阻止默认刷新行为
const handleFormSubmit = (e) => {
  e.preventDefault();
};

// 单独定义Redux登录action生成器（建议放到redux对应的action文件中统一管理）
const loginUser = (userInfo) => ({
  type: 'USER_LOGIN',
  payload: userInfo
});

• 对应修改组件中的调用逻辑
  1. 把表单提交按钮的onClick={loginToDo}改为onClick={handleFormSubmit}，更规范的写法是直接给form标签绑定onSubmit={handleFormSubmit}
  2. 修改注册成功后的dispatch逻辑，同时修正Firebase用户字段写错的问题（用户邮箱属性是email不是mail）：

  dispatch(
    loginUser({
      email: userAuth.user.email,
      uid: userAuth.user.uid,
      displayName: name,
      photoURL: profile,
    })
  )
  

• 可选优化：补充表单校验逻辑，比如邮箱格式校验、密码长度校验，提前拦截非法输入，避免Firebase返回错误弹窗影响用户体验

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