Как мне коллективно проверять форму реагировать на избыточность, используя встроенные валидаторы onChange?

Question

Я пытаюсь коллективно проверить форму Redux на основе валидаторов в каждом из полей.Да, я знаю, что могу сделать так, чтобы Redux делал это на уровне формы, но я использую этот компонент только как часть многоэтапной многоэтапной формы, и мне нужно иметь возможность самостоятельно проверять группировки полей.Проблема, с которой я сталкиваюсь, заключается в том, что при привязке к изменению или обновлению обработчиков данные, проверяемые с помощью полей Redux, устаревают.Кажется, я пытаюсь проверить старое состояние до того, как новое состояние распространилось на поля.Как мне проверить текущее значение в полях с помощью какого-либо обработчика, обратного вызова и т. Д.?(Я оставил свои консольные операторы там, чтобы проиллюстрировать, где я вижу отставание. Я очень новичок в React и Redux, поэтому, пожалуйста, будьте добры.)

Вот мой код компонента и код поля / валидатора:

AccountCreationCreateAccountStep.js:
-------------------------------------
import React from "react"
import PropTypes from "prop-types"
import { Field, reduxForm } from 'redux-form'
import { TextField } from '../helpers/reduxFieldRenderers'
import { requiredValidator, emailValidator, phoneValidator } from '../helpers/validators'

class AccountCreationCreateAccountStep extends React.Component {
  constructor(props) {
    super(props);
    this.valid = this.valid.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  valid() {
    return ["account_name", "account_contact_email", "account_phone_number", "account_address"].map((f) => this.refs[f].getRenderedComponent().props.meta.valid, this).reduce((a, b) => a && b, true);
  }

  handleChange() {
    console.log("Changed " + this.valid());
  }

  componentDidUpdate() {
    console.log("Update " + this.valid());
  }

  render () {
    return (
      <React.Fragment>
        <div className="account-creation-wizard-form-container">
          <h4>Create Account</h4>
          <Field type="text" withRef ref="account_name" onChange={this.handleChange} id="account_name" label="Account Name" component={TextField} name="account[name]" className="form-control string" validate={requiredValidator}/>
          <Field type="text" withRef ref="account_contact_email" onChange={this.handleChange} id="account_contact_email" label="Contact Email" component={TextField} name="account[contact_email]" className="form-control string" validate={[requiredValidator, emailValidator]}/>
          <Field type="text" withRef ref="account_phone_number" onChange={this.handleChange} id="account_phone_number" label="Phone Number" component={TextField} name="account[phone_number]" className="form-control string" validate={[requiredValidator, phoneValidator]}/>
          <Field type="text" withRef ref="account_address" onChange={this.handleChange} id="account_address" label="Address" component={TextField} name="account[address]" className="form-control string"/>
        </div>
      </React.Fragment>
    );
  }
}

export default AccountCreationCreateAccountStep

-----------------------
reduxFieldRenderers.js
-----------------------

import React from "react"

class TextField extends React.Component {
  render() {
    const { input, label, type, name, id, className, meta: { touched, error, warning } } = this.props;
    return (
      <div className="form-group string">
          <label className="from-control-label" htmlFor={id}>{label}</label>
          { touched && ((error && <span className="field-error">{error}</span>) || (warning && <span className="field-error">{warning}</span>))}
          <input {...input} type={type} name={name} id={id} className={className} />
      </div>
    )
  }
}

export { TextField }

------------------------
validators.js
------------------------

const requiredValidator = value => value ? undefined : 'Required'
const maxLengthValidator = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined
const minLengthValidator = min => value =>
  value && value.length < min ? `Must be as least ${min} characters` : undefined
const numericValidator = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined
const minValueValidator = min => value =>
  value && value < min ? `Must be at least ${min}` : undefined
const emailValidator = value =>
  value && !/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/i.test(value) ?
  'Invalid email address' : undefined
const phoneValidator = value =>
  value && !/^(\+[0-9]{1,2})?((\([0-9]{3}\))|([0-9]{3}))[0-9]{3}-?[0-9]{4}$/i.test(value) ?
  'Invalid phone number' : undefined

export { requiredValidator, maxLengthValidator, minLengthValidator, numericValidator, minValueValidator, emailValidator, phoneValidator };