javascript - 反应最终形式 - 无限提交

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