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

Kocur4d

我正在使用react-final-form

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

可以说,返回的错误是关于名称不是唯一的。

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

我无法弄清楚如何从中修改表单状态的方式catch

丹尼尔W.

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

基本上,在您的Forms render prop中,您必须向其传递一个包含对象的结构化对象,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>
   )}
/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用错误界面

用户提交登录表单后,数据将如何处理?

通过表单提交数据后如何防止重定向

RVM更新后,Capistrano使用错误的Ruby版本

如何避免使用错误版本的数据的错误?

表单提交后如何处理返回的数据

使用Laravel Fram工作提交数据后清除表单输入

Squarespace:表单提交失败:使用JavaScript成功处理表单数据后,表单未提交到Mailchimp

提交数据后如何清空此AngularJS表单?

使用react hooks提交失败后恢复表单提交状态

提交React表单后,如何清除Bootstrap 4错误?

反应:使用async / await在表单提交后获取数据

使用新值更新验证后,如何重置表单中的输入字段失败

Laravel:在错误的方法放置表单验证响应后提交方法删除表单失败

使用JavaScript提交后如何隐藏表单?

Ajax表单提交但调用错误功能

如何使用expressjs提交表单后显示数据

表单不断提交使用错误的回报

Rails 4:提交失败后滚动浏览器窗口以形成表单(验证错误)

在表单中提交一些信息后,如何使用SetState获取数据?

在Rails中使用会话提交后保留数据表单

asp.net提交表单后如何获取post数据

表单 - 不允许用户使用错误的电话和电子邮件提交

Django Heroku 推送在第一次后因 Grep 使用错误而失败

提交表单后如何显示选择值并出现错误?

如何使用 jquery 传递数据提交表单

单击提交表单后如何更新我的页面?

在flutter中提交数据后如何清除表单?

使用角度提交后如何重置表单?