Динамическая проверка в форме Redux - Revalidate.js

Question

Обзор

Я настраиваю форму, в которой пользователь видит поля ввода «Имя» и «Фамилия», которые создаются с использованием избыточных форм с использованиемact-bootsrap для внешнего интерфейса.В этой форме пользователь может добавить больше строк (еще не построено), чтобы впоследствии добавить больше студентов.

Проблема

Я использую revalidate.js , что позволяет мне создавать встроенную проверку в реальном времени.Настройка библиотеки должна знать имя вашего поля ввода, однако в моем случае я не буду знать имя.Он будет зависеть от того, сколько их строк будет ("firstName.1", "firstName.2" ...).

, когда выполняется повторная проверка, он должен иметь доступ к компонентам поддержки через второй аргумент, называемый "ownProps".

Пример:

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

}

Поскольку моя форма находится в избыточном формате, я сопоставил свою форму с помощью функции подключения, используя mapStateToProps.Однако после этого я не могу увидеть свою форму в ownProps.

Возможное решение

У другого пользователя при переполнении стека возник такой же вопрос относительно проверки правильности построения с помощью динамических форм с использованием этой же библиотеки.,Вы можете просмотреть их проблему здесь .

Однако, когда я следую этому точному методу, я не получаю те же результаты.Я пытался комментировать, чтобы получить продолжение, но безуспешно.Я думаю, что это проблема, когда библиотеки обновлены, и, следовательно, предоставленное решение не работает.

Код

Обратите внимание, что этот код работает только для одной строки, я будуисправить это позже.Сначала мне нужен доступ, чтобы просмотреть мою форму в ownProps.

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, чтобы я знал свой редуктор и отправкудействие работает.Я подумал, что, возможно, это проблема жизненного цикла, так как проверка выполняется до componentDidUpdate().Однако после ввода значений в поля ввода будет запущен validate (), который по-прежнему не будет иметь доступа к объектам, которые я сопоставил с реквизитами.