如何在useFormik hook的onSubmit事件中使用async/await

Formik 本身就支持异步的 onSubmit 回调，不需要额外做包装适配，直接把 onSubmit 回调写成 async 函数，就能在里面正常用 await 调 axios，Formik 会自动管理提交过程的状态。

实现注意点 #

• onSubmit 回调接收两个参数，第一个是表单值，第二个是 Formik 提供的工具方法，常用的有重置提交状态的setSubmitting、设置表单错误的setErrors
• 接口请求一定要包在try/catch里，不然请求抛错会触发未捕获的Promise异常
• 不管请求成功还是失败，最后都要调用setSubmitting(false)，不然提交按钮会一直卡在禁用状态
• 可以拿formik.isSubmitting状态控制提交按钮的禁用态，避免用户重复点提交

完整改造后代码 #

import React from 'react';
import { useFormik } from 'formik';
import axios from 'axios'; // 提前安装并引入axios

const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    // 直接标记为async函数即可，第二个参数为Formik提供的辅助方法
    onSubmit: async (values, { setSubmitting, setErrors }) => {
      try {
        // 替换为实际的后端接口地址
        const response = await axios.post('/your-api/signup', values);
        // 接口请求成功后的业务逻辑：路由跳转、成功提示等
        console.log('提交成功，服务端返回：', response.data);
        alert(JSON.stringify(values, null, 2));
      } catch (error) {
        // 接口报错处理，可将后端返回的表单校验错误同步给Formik
        const serverErrors = error.response?.data?.errors;
        if (serverErrors) {
          setErrors(serverErrors);
        } else {
          alert('提交失败，请检查网络后重试');
        }
      } finally {
        // 无论请求成功还是失败，都重置提交状态
        setSubmitting(false);
      }
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {/* 提交过程中禁用按钮，防止重复提交 */}
      <button type="submit" disabled={formik.isSubmitting}>
        {formik.isSubmitting ? '提交中...' : 'Submit'}
      </button>
    </form>
  );
};

常见错误写法避坑 #

• 不要自己在<form onSubmit={...}>层套async函数包裹formik.handleSubmit，这么写Formik拿不到正确的提交状态，直接在useFormik配置项里写async的onSubmit就行
• 别漏写finally块里的setSubmitting(false)，不然第一次提交完成后按钮会一直处于禁用状态，无法再次点击
• 别省catch块的错误处理，不然接口报错时页面会直接抛出未捕获异常，用户也感知不到提交失败的原因

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