React注册表单异常：成功后不跳转不重置+Async await兼容报错

问题1：注册成功后表单不重置、无法跳转到首页 #

原因 #

1. 未调用setFormData重置表单状态
2. updateProfile是异步操作，但未用await等待完成，可能导致后续逻辑提前执行甚至中断
3. 错误提示过于笼统，无法定位具体失败原因

修复 #

1. 在注册成功逻辑末尾添加表单重置代码：

setFormData({
  name: '',
  email: '',
  password: '',
})

2. 给updateProfile添加await，确保操作完成后再执行后续步骤：

await updateProfile(auth.currentUser, {
  displayName: name,
})

3. 优化catch块的错误提示，输出具体信息：

toast.error(`注册失败：${error.message}`)

问题2："Async await is only available in es8"兼容错误 #

原因 #

项目编译环境未启用ES8（ES2017）语法支持，或打包工具编译目标版本过低

修复 #

1. 安装必要Babel依赖：

npm install @babel/plugin-transform-runtime @babel/preset-env --save-dev

2. 在.babelrc或babel.config.js中配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

3. 若使用Create React App，确保react-scripts版本在3.0.0以上，版本过低则升级：

npm install react-scripts@latest --save

完整修复代码 #

import { useState } from 'react' // 原代码缺失该导入，必须添加
import { Link, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import {
  getAuth,
  createUserWithEmailAndPassword,
  updateProfile,
} from 'firebase/auth'

import { setDoc, doc, serverTimestamp } from 'firebase/firestore'

import { db } from '../firebase.config'
import OAuth from '../components/OAuth'


function SignUp() {
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  })
  const { name, email, password } = formData

  const navigate = useNavigate()

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.id]: e.target.value,
    }))
  }


  const onSubmit = async (e) => {
    e.preventDefault()

    try {
      const auth = getAuth()

      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      )

      const user = userCredential.user

      await updateProfile(auth.currentUser, {
        displayName: name,
      })

      const formDataCopy = { ...formData }
      delete formDataCopy.password
      formDataCopy.timestamp = serverTimestamp()

      await setDoc(doc(db, 'users', user.uid), formDataCopy)

      // 重置表单
      setFormData({
        name: '',
        email: '',
        password: '',
      })

      navigate('/')
    } catch (error) {
      toast.error(`注册失败：${error.message}`)
    }
  }

  return (
    <>
      <div className='pageContainer'>
        <header>
          <p className='pageHeader'>Welcome Back!</p>
        </header>

        <form onSubmit={onSubmit}>
          <input
            type='text'
            className='nameInput'
            placeholder='Name'
            id='name'
            value={name}
            onChange={onChange}
          />
          <input
            type='email'
            className='emailInput'
            placeholder='Email'
            id='email'
            value={email}
            onChange={onChange}
          />

          <div className='passwordInputDiv'>
            <input
              type='password'
              className='passwordInput'
              placeholder='Password'
              id='password'
              value={password}
              onChange={onChange}
            />

          </div>

          <Link to='/forgot-password' className='forgotPasswordLink'>
            Forgot Password
          </Link>

          <div className='signUpBar'>
            <p className='signUpText'>Sign Up</p>
            <button className='signUpButton'>
              Sign Up
            </button>
          </div>
        </form>

        <OAuth />

        <Link to='/sign-in' className='registerLink'>
          Sign In Instead
        </Link>
      </div>
    </>
  )
}

export default SignUp

关键提醒 #

• 原代码缺失useState导入，这是组件运行的必要条件，必须补充
• 所有异步操作需用await等待完成，避免逻辑顺序混乱
• 兼容问题核心是编译环境未支持ES8语法，通过配置Babel或升级依赖解决

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