Formik的isSubmitting状态何时会被重置为false？

Formik isSubmitting 状态重置规则 #

首先明确isSubmitting的自动重置触发时机：

• 表单校验不通过时，Formik会自动将isSubmitting重置为false，这也是你校验出错时按钮能正常恢复的原因。
• 表单校验通过后，Formik会先把isSubmitting设为true，之后仅在以下两种场景会重置为false：
  • 你传入的onSubmit函数返回了Promise，Formik会在该Promise执行完成（无论成功/失败）后自动把isSubmitting设为false
  • 你手动调用onSubmit第二个参数（Formik操作助手）里的setSubmitting(false)方法

代码问题所在 #

你的submitForm是async函数，执行后会返回Promise，但你在onSubmit回调中调用它时，既没有返回这个Promise，也没有等待它执行完成，Formik感知不到提交逻辑已经结束，因此不会自动重置isSubmitting，导致按钮一直处于禁用状态。

修复方案 #

你可以任选以下一种方式修改代码：

方案1：返回submitForm的Promise #

直接让onSubmit返回submitForm执行后的Promise即可，Formik会自动处理状态重置：

<Formik 
    enableReinitialize
    validationSchema={schema}
    onSubmit={ (values) => submitForm(values) }
    initialValues={initialFormValues}
>

方案2：用async/await等待提交逻辑执行完成 #

给onSubmit加async修饰符，等待submitForm执行结束：

<Formik 
    enableReinitialize
    validationSchema={schema}
    onSubmit={ async (values) => {
        await submitForm(values);
    }}
    initialValues={initialFormValues}
>

方案3：手动调用setSubmitting重置状态 #

如果你需要更灵活的控制，可以通过Formik提供的操作助手手动重置状态：

<Formik 
    enableReinitialize
    validationSchema={schema}
    onSubmit={ (values, { setSubmitting }) => {
        submitForm(values).finally(() => setSubmitting(false));
    }}
    initialValues={initialFormValues}
>

内容的提问来源于stack exchange，提问作者gene b.