反应最终形式 - 无限提交

Question

如果我们尝试多次发送此表单，我们将获得无限提交。

如果我们在onSubmit上设置sleep((函数，一切正常。

为什么？怎么做对？

import React from 'react'
import { render } from 'react-dom'
import { Form, Field } from 'react-final-form'
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const onSubmit = async values => {
// Everything works fine with sleep()
// await sleep(100);
console.log('onSubmit...');
}
const App = () => (
<Form
onSubmit={onSubmit}
render={({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Field name="notes" component="textarea" placeholder="Notes" />
<button type="submit" disabled={submitting}>
Submit
</button>
</form>
)}
/>
)
render(<App />, document.getElementById('root'))

Answer 1

要像正在做的事情一样同步处理提交，返回undefined即：

const onSubmit = values => {
console.log('onSubmit...');
return;
}

见 https://final-form.org/docs/final-form/types/Config#onsubmit