Formik 的“isSubmitting”何时设置回 False？

Question

I have a simple Formik form where the Submit method simply outputs to the console. The structure is

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

If there are validation errors, the Submit button correctly ends up enabled after clicking. But if there are no validation errors, I output to the console, and Submit stays disabled even though I'm done. At what point is isSubmitting set back to FALSE in this example?

Answer 1

Adding to digitalbreeds answer, actually Formik does reset isSubmitting to false , when your onSubmit handler returns a Promise.

See in the 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.

Answer 2

Not at all. Formik doesn't know when your submit is done, so you need to do it yourself. Formik actually passes the setter into your submit handler for exactly that reason.

Change your code to this:

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

and then in your submitForm method, call setSubmitting(false) when done, eg in a finally block.

Answer 3

Its work form me

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

ref: https://formik.org/docs/api/formik#setsubmitting-issubmitting-boolean-void