Formik的"isSubmitting"何时被重置为False？

Question

我有一个简单的Formik表单，在这个表单中，提交方法只是将输出到控制台。结构如下：

// 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>

如果有验证错误，则单击后，提交按钮正确地在启用。

但是，如果没有验证错误，我会输出到控制台，并且即使我完成了，提交保持禁用。

在这个例子中，isSubmitting 什么时候设置回 FALSE？

- gene b.

Answer 1

完全不是这样的。Formik 不知道你的提交何时完成，所以你需要自己完成它。实际上，Formik 将 setter 传递给你的提交处理程序，正是出于这个原因。

将你的代码更改为以下内容：

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

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

- digitalbreed

Answer 2

补充digitalbreeds的回答，实际上当你的onSubmit处理程序返回Promise时，Formik会将isSubmitting重置为false。

请参阅文档：

重要提示：如果onSubmit是异步的，则Formik将在它已解决后自动为您设置isSubmitting为false。这意味着您不需要手动调用formikBag.setSubmitting(false)。但是，如果您的onSubmit函数是同步的，则需要自行调用setSubmitting(false)。

- wintersan

Answer 3

对我来说它工作正常

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

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

该方法 setSubmitting(isSubmitting: boolean) void 可以用于在提交表单时设置 isSubmitting 的值，通常用于显示加载状态或禁用提交按钮。

- hariom nagar