提交失败后如何用错误数据更新表单？

Question

<Form
  onSubmit={
    (values) => makeAPICall(values).catch(e => ????)
  }
>
...
  <Field name='name'>
    ...
  </Filed>
...
</Form>

假设返回的错误是关于名称不唯一的。

我想根据来自 e 的消息在 Field 上设置错误。

我不知道如何从内部修改表单状态 catch。

Answer 1

react-final-form项目有一个关于提交错误处理的codesandbox。
在这里：https://codesandbox.io/s/9y9om95lyp

基本上，在您的表单渲染道具中，您必须向其传递一个包含 submitError 的解构对象，并检查您的字段中是否存在提交错误。

<Form
  onSubmit={values => makeAPICall(values).catch(e => return { username: e })}
  // ...
  render={({
    handleSubmit,
    values,
    // ...
   }) => (
    <form onSubmit={handleSubmit}>
      <Field name="username">
        {({ input, meta }) => (
          <div>
            <label>Username</label>
            <input {...input} type="text" placeholder="Username" />
            {meta.submitError && meta.touched && <span>{meta.submitError}</span>}
          </div>
        )}
      </Field>
    </form>
   )}
/>

提交失败后如何用错误数据更新表单？

How to update a form with error data after unsuccessful submit?

javascript

react-final-form