Redux Form - 如何验证异步模糊字段数组？答案

【问题标题】：Redux Form - How to validate async blur field arrays?Redux Form - 如何验证异步模糊字段数组？
【发布时间】：2017-12-21 17:09:39
【问题描述】：

我有一个像这样的 FieldArray：

renderLanguages = fields => (
    <div>
      {fields.map(fieldName => <Field name={fieldName + '.iso'} component="input" type="text" />
    </div>
)

<FieldArray name="languages" component={renderLanguages} />

我喜欢以异步方式验证它：

const asyncValidate = values => {
  console.log(values);
}

export default reduxForm({
  form: 'languagesForm',
  asyncValidate,
  asyncBlurFields: ['languages']
})(LanguagesForm)

我的 asyncValidate 永远不会被调用。我想知道我是否必须以其他方式指定 asyncBlur 字段。或者如果 redux-form 不提供字段数组的异步验证。

【问题讨论】：

标签： validation redux-form

【解决方案1】：

要让Redux-form FormArray 与asyncValidate 一起使用，它需要将字段作为languages[].<nameOfTheFieldOfChildComponet> 传递，但不是languages。我认为它的设计也很好，一般来说，我们不会对任何参数的更改进行异步验证，而是对特定参数进行验证。

下面是工作示例：- https://codesandbox.io/s/mq8zz58mrj

const asyncValidate = values => {
  console.log(values);
}

export default reduxForm({
  form: 'languagesForm',
  asyncValidate,
  asyncBlurFields: ['languages[].name']
})(LanguagesForm)

【讨论】：