字段组件外的 Redux-form 6.0.0 访问错误 [英] Redux-form 6.0.0 access error outside Field component

问题描述

在 Redux-form v5 中，我能够从装饰表单的任何位置访问内联"错误(异步验证)，如下所示:

In Redux-form v5 I was able to access to the "inline" errors (async validation) from anywhere in the decorated form, like so:

const fields = [
  'email'
]

// inside the decorated form
const { email } = this.props.fields

console.log(email.error) // 'the validation error of the 'email' field

如何使用 Redux-form 6.0.0+ 实现相同的功能?

How can I achieve the same thing using Redux-form 6.0.0+ ?

推荐答案

如果你想在输入旁边显示错误，那么它应该在你传递给 component 的 component 中处理代码>字段.如果您想一起显示所有错误，例如在提交按钮的表单底部，您可以使用新的 Fields 组件 像这样:

If you are wanting to display the error next to the input, then it should be handled in the component that you pass to Field. If you want to display all the errors together, like at the bottom of the form by the submit button, you could use the new Fields component like so:

const fieldNames = [
  'email',
  'password'
]

const renderAllErrors = fields => (
  <ul>
    {Object.keys(fields).map(key => {
      const { meta: { touched, error } } = fields[ key ]
      return touched && error ? <li key={key}>{key}: {error}</li> : undefined
    })}
  </ul>
)

...

<Fields names={fieldNames} component={renderAllErrors}/>

这篇关于字段组件外的 Redux-form 6.0.0 访问错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！