Question

我是Formik React Forms lib的新手。我想知道为什么我需要将onSubmit代码包装在setTimeOut中：

网站（https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-gt-void-promise）中的示例

<Formik
    initialValues={{ name: 'jared' }}
    onSubmit={(values, actions) => {
        setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
        }, 1000);
    }}
>

我在文档中找不到任何解释。据我所知，该函数可以是同步的，也可以是异步的...

https://jaredpalmer.com/formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-void-promise-any

Answer 1

它在特定时间内禁用了表单按钮，在您的代码中是1秒。

两次提交相同的数据可能会产生不想要的结果，例如从银行帐户中两次提款或将两个相同的项目存储在在线商店的购物车中。

同样，您将获得不止一次的相同数据，因此您将处理这些不需要的帖子请求，然后必须清理这些混乱。

您可以禁用该按钮或将用户重定向到另一个页面。

Answer 2

您不需要将setTimeout()放在onSubmit()中。这只是文档中的一个示例，可能模拟了将表单值作为HTTP请求发送的常见用例。

Answer 3

有一个async submission example做了类似的事情，这次使用[None] 0 [42, 42] 1 [42, 42, 42] 2 [96, 42, 42, 96] 3 [42, 17, 42, 96, 42] 4 [42, 1, 17, 96, 42, 42] 5 [96, 1, 17, 3, 42, 42, 96] 6 [5, 1, 17, 3, 42, 42, 96, 5] 7 [42, 1, 17, 3, 29, 42, 96, 5, 42] 8 [29, 1, 12, 3, 17, 42, 96, 5, 42, 29] 9 [42, 1, 12, 3, 17, 39, 96, 5, 42, 29, 42] 10

async/await

其中const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); onSubmit={async (values) => { await sleep(500); alert(JSON.stringify(values, null, 2)); }}是await sleep(500)的占位符

Answer 4

就是给你感觉onSubmit把查询发到后面，几秒就返回结果

Formik：为什么在onSubmit中设置setTimeOut？

4 个答案: