既存の状態遷移中に更新できません - 特定の状態が変更されたときいつでも

Question

私のコンポーネントでこのエラーが発生しました。エラーは、「完了」状態が何らかの方法で変更されたときに発生します。発行元は、状態が変更されたときにgetValidationState（）にあります。しかし、私のアプリケーションを壊すことはありませんが、私はこのコンポーネントで何が間違っているのか、それを将来どのように修正できるのかを知りたいと思っています。

import React, { Component } from 'react'; 
import 'bootstrap/dist/css/bootstrap.css'; 
import 'bootstrap/dist/css/bootstrap-theme.css'; 
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'; 

class FormGroupValidation extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      value: '', 
      completed: false 
     }; 

     this.getValidationState = this.getValidationState.bind(this); 
     this.complete = this.complete.bind(this); 
     this.unComplete = this.unComplete.bind(this); 
     this.toggleComplete = this.toggleComplete.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 
    getValidationState() { 
     const length = this.state.value.length; 

     if (this.ThresholdType === 'max') { 
      if (this.props.errorLen && length <= this.props.errorLen) { 
       return 'error'; 
      } else if (this.props.warnLen && length <= this.props.warnLen) { 
       this.unComplete(); 
       return 'warning'; 
      } else if (this.props.successLen && length <= this.props.successLen) { 
       this.complete(); 
       return 'success'; 
      } 
     } else { 
      if (this.props.successLen && length >= this.props.successLen) { 
       this.complete(); 
       return 'success'; 
      } else if (this.props.warnLen && length >= this.props.warnLen) { 
       return 'warning'; 
      } else if (this.props.errorLen && length >= this.props.errorLen) { 
       this.unComplete(); 
       return 'error'; 
      } 
     } 
    } 
    complete() { 
     if (!this.state.completed) this.toggleComplete(); 
    } 
    unComplete() { 
     if (this.state.completed) this.toggleComplete(); 
    } 
    toggleComplete() { 
     this.setState({completed: !this.state.completed}); 
    } 
    handleChange(e) { 
     this.setState({ value: e.target.value }); 
    } 
    render() { 
     return (
     <form> 
      <FormGroup 
       controlId="formBasicText" 
       validationState={this.getValidationState()} 
      > 
       <ControlLabel>Working example with validation</ControlLabel> 
       <FormControl 
       type="text" 
       value={this.state.value} 
       placeholder="Enter text" 
       onChange={this.handleChange} 
       /> 
       <FormControl.Feedback /> 
       <HelpBlock>Validation is based on string length. </HelpBlock> 
      </FormGroup> 
     </form> 
     ); 
    } 
} 

export default FormGroupValidation; 

Answer 1

サイクルが進行しているようです。

FormGroup JSXでレンダリングする場合、このプロパティはvalidationState={this.getValidationState()}です。レンダリングすると、その関数が呼び出されます。その後の関数呼び出しによって、toggleComplete()関数の状態が変更されます。

リアクションはリアクション（funnily enough：P）になっているはずですが、すなわち、状態が変化した場合、それに応じて状態が変化します。