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

Question

在 Redux-form v5 中，我能够从装饰形式的任何地方访问 "inline" 错误（异步验证），如下所示：

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

我找到的解决方案是使用 error 属性 (http://redux-form.com/6.0.0-rc.4/docs/api/Props.md/#-error-any-)。从我的 asyncValidate 函数中，我用我的字段错误填充返回的 error._error 对象。然后我可以使用装饰形式访问它 const { error } = this.props.

如果谁有更好的解决方案...

编辑：不要这样做。使用有效答案（Fields 部分）。

Answer 2

如果您想要在输入旁边显示错误，则应该在传递给 Field 的 component 中处理它。如果你想一起显示所有错误，比如在提交按钮旁边的表单底部，你可以像这样使用新的 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}/>

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

Redux-form 6.0.0 access error outside Field component

reactjs

redux-form