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>

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

Answer 1

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

将您的代码更改为：

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

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

Answer 2

添加到 digitalbreeds 答案中，实际上，当您的处理程序返回 Promise时，Formik 确实重置isSubmitting为。falseonSubmit

请参阅文档：

重要提示：如果 onSubmit 是异步的，那么一旦解决，Formik 就会自动代表您将 isSubmitting 设置为 false。这意味着您不需要手动调用 formikBag.setSubmitting(false) 。但是，如果您的 onSubmit 函数是同步的，那么您需要自己调用 setSubmitting(false) 。