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

反应最终形式-无限提交

1 个答案: