Question

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

我尝试遵循以下示例：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

Answer 1

我有解决方案，这不是最好的方法，但是只有一种方法可以解决。

在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}]`));
    }
  }
}

在FieldArray内部进行redux形式的自定义动态验证

1 个答案: