Реагировать - Предупреждение: обновление было запланировано изнутри функции обновления

Я сталкиваюсь с множеством проблем с обновлением состояний в React для целей проверки, и всегда мое обновление состояния после рендеринга или чего-то в этом роде, в любом случае, я видел, что многие люди решают это, используя функцию обратного вызова в setState, но это всегда выдает следующее предупреждение.

Предупреждение: обновление (setState, replaceState или forceUpdate) было запланировано изнутри функции обновления. Функции обновления должны быть чистыми, без побочных эффектов. Рассмотрите возможность использования componentDidUpdate или обратного вызова.

Я пытался обновить внутри componentDidUpdate, но это привело к бесконечному циклу.

Это мой setState с функцией обратного вызова.

state = {
    index: 0,
    activeInput: '',
    errors: {
      error: false,
      errorNombre: false,
      errorCuil: false,
      errorEmail: false,
      errorContrasena: false,
      errorCalle: false,
      errorNumero: false,
      errorProvincia: false,
      errorLocalidad: false
  },
    values: {...this.props.initialValues}
  };

    _onChangeValue = (name, value) => {
        this.setState(prevState => {
          return {
            values: {
              ...prevState.values,
              [name]: value
            }
          }, this.validate(name)
        })
      };

И это функция проверки, это переключатель, так что я намного дольше, но проблема может быть в том, что в каждом случае есть другой setState внутри ...

validate = input => {

    switch(input){
      case 'nombre':
        let { nombre } = this.state.values
        let splitNombre = nombre.split(' ');

        if ( splitNombre.length > 1 && splitNombre[1].length === 0 || nombre.length === 0 || splitNombre.length === 1 ) {
          this.setState(prevState => ({
            errors: { ...prevState.errors, error: true, errorNombre: true }
          }));
        } else {
          this.setState(prevState => ({
            errors: { ...prevState.errors, error: false, errorNombre: false }
          }));
        }
        break

Поскольку это составной компонент, он немного беспорядочный, но вот файлы

Input.js

import React, { PureComponent } from 'react';

class Input extends PureComponent {
  _onChangeText = text => {
    this.props.onChangeValue(this.props.name, text);
  };

  render() {
    const { onChangeValue, name, ...rest } = this.props;
    return (
      <input {...rest} onChange={(event) => this._onChangeText(event.target.value)} />
    );
  }
}

export default Input;

Steps.js

import Botones from './Botones'

    export default class Step extends PureComponent {
        state = {}
        render() {
          return (
            <Fragment>

              {this.props.children({
                onChangeValue: this.props.onChangeValue,
                values: this.props.values,
                index: this.props.index,
                errors: this.props.errors
              })}

              <div>
            <Botones currentIndex={this.props.currentIndex}
                     prevStep={this.props.prevStep}
                     nextStep={this.props.nextStep}
                     onSubmit={this.props.onSubmit}
                     isLast={this.props.isLast}
                     isFirst={this.props.isFirst}
                     error={this.props.errors.error}    
            />

          </div>
        </Fragment>
      )
    }
  }

FirstStep.js

import Steps from './Steps';

export default class FirstStep extends Component {

    constructor(props){
        super(props)
        this.state = {}
    }

    render() {
        //console.log(this.props)
        return (
            <Fragment>
                <Steps level={this.props.index}/>
                <form onSubmit={this.onSubmit} className="mt90">
                    <div>
                        <label>Nombre completo</label>
                        <input type="text"
                               name="nombre"
                               placeholder="Escriba su nombre"
                               onChange={ event => this.props.onChangeText('nombre', event.target.value) }
                               value={this.props.values.nombre}
                               className={ `${ this.props.errors.errorNombre && "error-focus" }` }
                               />
                        { this.props.errors.errorNombre &&
                        <span className="error">No es un nombre completo</span> }
                    </div>
                    <div className="mt50">
                        <label>N° de CUIL</label>
                        <input type="text"
                               name="cuil"
                               placeholder="Ej.: 23-45678901-2"
                               onChange={ event => this.props.onChangeText('cuil', event.target.value) }
                               value={this.props.values.cuil}
                               className={ `${ this.props.errors.errorCuil && "error-focus" }` }
                               />
                        { this.props.errors.errorCuil &&
                        <span className="error">No es un CUIL válido</span> }
                    </div>
                </form>
            </Fragment>
        )
    }
}

App.js (имеет FirstStep в качестве дочернего компонента)

[...]
Render()
<RegisterBox.Step>
            { ({ values, onChangeValue, index, errors }) => (
              <FirstStep values={values} onChangeText={onChangeValue} index={index} errors={errors} />
            )}
          </RegisterBox.Step>
[...]