reactjs - Redux-form 6.0.0 Field 组件外访问错误

Question

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

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+ 实现同样的效果？

Answer 1

如果您想在输入旁边显示错误，则应在传递给 Field 的 组件 中处理该错误。如果您想一起显示所有错误，例如在表单底部的提交按钮旁边，您可以使用新的 Fields component像这样:

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}/>