Redux表单中的动态验证-Revalidate.js

Question

概述

我正在设置一个表单，用户可以在其中看到“名字”和“姓氏”输入字段，这些字段是使用redux-forms通过前端的react-bootsrap创建的。通过这种形式，用户可以添加更多行（尚未构建）以随后添加更多学生。

问题

我正在使用revalidate.js，它使我能够建立内联实时验证。库的设置需要知道您输入字段的名称，但是就我而言，我将不知道该名称。这将取决于它们是("firstName.1", "firstName.2" ...)的行数。

运行重新验证时，它应该可以通过名为“ ownProps”的第二个参数来访问组件props。

示例：

const validate = (values, ownProps) => {
    console.log("validate ran, ownProps are,", ownProps);

}

由于我的表单处于还原状态，因此我已经使用 mapStateToProps 通过connect函数映射了我的表单。但是，执行此操作后，我无法在ownProps中看到我的表单。

可能的解决方案

堆栈溢出的另一个用户对于使用同一库使用动态表单进行构建验证也存在相同的问题。您可以查看他们的issue here。

但是，当我遵循这种精确方法时，我不会得到相同的结果。我尝试发表评论以进行跟进，但没有运气。我认为这是图书馆已更新的问题，因此提供的解决方案不起作用。

代码

  

请注意，此代码仅适用于一行，我稍后会修复。我首先需要访问自己的表单才能看到自己的表单。

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import {compose} from 'redux';
import { Container, Form, Col} from "react-bootstrap";
import { connect } from "react-redux";
import TextInput from "../../forms/textInput";
import { setupStudentForm } from '../../../store/actions/students';

export class CreateStudentsForm extends Component {

    componentDidMount() {
        let formArray = []        
        // Build form based on how many rows are in redux
        for (let i = 1; i !== this.props.rows + 1; i++) {
            let firstNameField = {
                fieldName: `firstName.${i}`,
                label: 'First Name',
                required: true,
                type: "text",
            }
            let lastNameField = {
                fieldName: `lastName.${i}`,
                label: 'Last Name',
                required: true,
                type: "text",
            }
            // Push form into an array
            formArray.push(firstNameField, lastNameField);
        }
        // Call action to push from to redux
        this.props.setupStudentFormHandler(formArray);
    }

    render() {
        const { studentForm, attempt } = this.props;
        // Map through form array in redux and create template
        if(studentForm){
            this.form = studentForm.map((field, index) => {
                return (
                        <Col xs={5} key={index}>
                            <Form.Group className="mb-0 noValidate">
                                <Field
                                    label={field.label}
                                    attempt={attempt}
                                    name={field.fieldName}
                                    required={field.required}
                                    type={field.type}
                                    component={TextInput}
                                />
                            </Form.Group>
                        </Col>
                )  
            })
        }
        return (
            <Container>
                    <Form.Row className="animated fadeIn">
                {this.form}
                </Form.Row>
            </Container>
        )
    }
}

const validate = (values, ownProps) => {
    //This console log fails even though it should be able to see my state as I mapped it to props in the connect funtion
    console.log("validate ran, ownprops see studentForm as ", ownProps.studentForm);
}

const mapStateToProps = state => {
    return {
        // Get access to student state which will have form and row count
        studentForm: state.students.studentForm,
        rows: state.students.rows
    };
  };

  const mapDispatchToProps = dispatch => {
    return {
        //Send formArray to redux
        setupStudentFormHandler: (form) => dispatch(setupStudentForm(form))  
    };
  };


  export default compose(
    reduxForm({
        form: "createStudents",
        enableReinitialize: true,
        validate
      }),
    connect(
      mapStateToProps,
      mapDispatchToProps
    )
  )(CreateStudentsForm);

我能够通过mapStateToProps访问我的表单，从而构建我的表单（请参见上面的屏幕截图），因此我知道我的reducer和dispatch动作正在起作用。我认为这可能是生命周期问题，因为validate在componentDidUpdate()之前运行。但是，在输入字段中输入值后，validate（）将运行，并且仍然无法访问我映射到道具的对象。