Redux表单字段数组验证

Question

我正在将Redux表单模块用于项目中的所有表单。我想基于组件道具创建一个验证。有一个表格，每行都有一些字段。 该表 的第一个字段是包含来自商店的所有产品的下拉列表。每个产品都有可用数量，如果字段数量大于可用数量，则Redux表单应针对特定行返回错误。我无法在reduxForm方法中传递的validate函数中执行此操作：

reduxForm({
  validate,
  form: 'theNameOfTheForm'
})

我无法在validate函数中进行表验证的原因是因为它看不到组件的当前属性（我没有找到一种方法来做到这一点）。我决定将validate功能作为道具传递给FieldArray组件：

// some methods

validate(values) {
    // some validation code
}

render() {
    return (
        <FieldArray validate={this.validate} />
    )
}

通过该validate方法，我可以访问组件props，但是无论从该方法返回什么，fieldprop 都不会在作为componentprop 传递给的组件中接收错误<FieldArray />。

return 'Some error message';

return ['Some error message'];

return {
    products: 'Some error message'
};

return {
    products: ['Some error message']
};

<FieldArray validate={this.validate} component={FieldArrayComponent} />

const FieldArrayComponent = ({ field, meta }) => {};

我如何进行验证？难道我做错了什么？还有另一种方法可以进行验证吗？

Answer 1

使用 HOC（高阶组件）时，您可以将组件 props 传递给 validate 函数，并在主 validate 函数中进行验证（无需在组件中创建方法，然后将其传递给 FieldArray 组件）。只需像这样导出组件：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    validate,
    form: 'ExampleForm'
  })(ExampleForm)
);

组件 props 作为第二个参数传递到验证函数中：

const validate = (values, props) => {
  const errors = {};

  return errors;
};