web-dev-qa-db-ja.com

React-警告：更新は更新関数内からスケジュールされました

検証のために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>
[...]
javascriptreactjswarningssetstate
6
Leandro Aranguez

小さな誤植をしたようです。あなたの解決策はもう少しこのように見えるはずです。

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

this.validateの呼び出しにより、角かっこが1セット移動したことに注意してください。次に、匿名関数でラップされているため、実際にコールバックとして使用できます。

これにより、混乱を招く動作が発生したと思います。 コンマ演算子 のため、setStateは値を更新せず、代わりに検証の結果のみで状態を更新します。

2
j ling

この問題について再考する必要があると思います。私たちが同じペースであることを確認するために、いくつかのことを繰り返します。

まず第一に、setStateは非同期であり、状態オブジェクトを更新してReactライフサイクルの関数を呼び出すためのReactへのシグナルのようなものです。

ネストされたsetStateは、非同期呼び出しの動作について推論するのが難しいため、お勧めできません。

ネストされたsetStateを回避するには、関数を再構築する必要があります。私はこの簡単な答えであなたのためにそれをすることはできません、そしてあなたはあなたがそうしたい方法を最もよく知っています。注意する必要があることの1つは、setState呼び出しをシリアル化して、この現在のsetState呼び出しに表示されているprevStateが実際に前の呼び出しからのものであることを確認できることです。これを機能させる方法は、setStateをPromiseでラップし、await/asyncを使用して呼び出しをシリアル化することです。

これが少し役立つことを願っています。

1
Huy Doan