Formik 的 "isSubmitting" 什么时候设置回 False？

Question

我有一个简单的 Formik 表单，其中 Submit 方法只是输出到控制台。结构是

// Submit Form: Custom method referenced in Formik
const submitForm = async (formValues) => {
    console.log(JSON.stringify(formValues));
};

<Formik 
    enableReinitialize
    validationSchema={schema}
    onSubmit={ (values) => {
        submitForm(values); // call my custom Submit method above
    }}
    initialValues={initialFormValues}
>
    {
        ({handleSubmit, handleChange, values, touched, errors, isSubmitting}) 
        => (
            <Form onSubmit={handleSubmit}> {/* Form starts here */}
                ...
                <Button type="submit" disabled={isSubmitting}>Search</Button>
            </Form>
       )
     }
   </Formik>

如果存在验证错误，“提交”按钮在点击后会正确启用。但是如果没有验证错误，我会输出到控制台，并且 Submit 保持禁用状态 即使我已经完成了。在此示例中，什么时候 isSubmitting 设置回 FALSE？

Answer 1

完全没有。 Formik 不知道您的提交何时完成，因此您需要自己完成。正是出于这个原因，Formik 实际上将 setter 传递到您的提交处理程序中。

将您的代码更改为：

onSubmit={(values, { setSubmitting }) => {
    submitForm(values, setSubmitting);
}}

然后在您的 submitForm 方法中，完成后调用 setSubmitting(false)，例如在 finally 块中。

Answer 2

它是我的作品

onSubmit={(values, actions) => {
     setTimeout(() => {
       alert(JSON.stringify(values, null, 2));
       actions.setSubmitting(false);
     }, 1000);
   }}

参考：https://formik.org/docs/api/formik#setsubmitting-issubmitting-boolean-void

Answer 3

添加到 digitalbreeds 答案，实际上 Formik 确实将 isSubmitting 重置为 false，当您的 onSubmit 处理程序 returns 一个 Promise 时。

见docs:

IMPORTANT: If onSubmit is async, then Formik will automatically set isSubmitting to false on your behalf once it has resolved. This means you do NOT need to call formikBag.setSubmitting(false) manually. However, if your onSubmit function is synchronous, then you need to call setSubmitting(false) on your own.

Formik 的 "isSubmitting" 什么时候设置回 False？

When is Formik's "isSubmitting" set back to False?

reactjs

formik