时间戳

首页 > 解决方案 > FieldArray 中的 redux-form 自定义动态验证

reactjs - FieldArray 中的 redux-form 自定义动态验证

问题描述

我正在尝试解决两个字段的验证。这是两个多选，我需要在两个字段中具有相同数量的选定项目。

我试图遵循这个例子：https : //redux-form.com/6.6.2/examples/fieldlevelvalidation/ 但问题是我正在使用 FieldArray 动态添加新行。

我试图制作这样的功能

const validateCount = (member) => (values, allValues) => {
  // validation funciton
}

member是 FieldArray 中行的标识符。

但是当我在渲染循环中调用这个函数时，会出现一个无限循环。

<FieldArray component={this.renderMapping} name="mapping" />

...

renderMapping = ({fields}) => {
  ...
    {fields.map((member, index) => {
      <Field
        component={MultiSelectField}
        name={`${member}.select1`}
        validate={required}
        ...
      />
      <Field
        component={MultiSelectField}
        name={`${member}.select2`}
        validate={[required, validateCount(member)]} // <<<<<<<< THIS IS PROBLEM
        ...
      />
    }
  ...
}

请，任何想法如何解决它？

它在console.log中，它可能正在调用无限渲染

redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:44.900
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:44.934
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:44.962
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:44.977
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.018
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.044
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:45.061
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.099
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.147
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:45.163
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.192
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.225
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:45.234
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.265
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.301
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:45.313
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.356
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.395
redux-logger.js:1  action @@redux-form/REGISTER_FIELD @ 13:25:45.407
redux-logger.js:1  action @@redux-form/UPDATE_SYNC_ERRORS @ 13:25:45.445
redux-logger.js:1  action @@redux-form/UNREGISTER_FIELD @ 13:25:45.483

标签： reactjsvalidationredux-form

解决方案

我有解决方案，这不是最好的，但只有一个有效。

在componentDidMount和componentWillUpdate我正在调用我创建的验证函数的生成器。

generateValidationFunctions = props => {
  const { values } = props;

  const size = get(values, 'mapping.length', 0);

  if (this.validationFunctions.length < size) {
    for (let i = this.validationFunctions.length; i < size; i++) {
      this.validationFunctions.push(this.validateCount(`mapping[${i}]`));
    }
  }
}

推荐阅读