反应最终形式 - 无限提交答案

【问题标题】：React final form - infinite submitting反应最终形式 - 无限提交
【发布时间】：2019-11-28 22:04:22
【问题描述】：

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

如果我们在 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'))

【问题讨论】：

您能具体说明您想要做什么吗？您要发送此表单多少次？
我只想在单击提交按钮时多次显示 console.log()。我想了解为什么 final-form 不能正常工作

标签： javascript reactjs react-final-form final-form

【解决方案1】：

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

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

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

【讨论】：

不幸的是，我需要一个异步函数
如果你想要异步，那么返回一个解析为console.log的promise，你试过了吗？
我可能误解了你的问题:)，你问为什么在console.log 之前需要await sleep(100)？如果您需要异步功能，await 是您解决承诺的方式。