Reactjs submit formとsetStateが初めて動作しない

Question

私は基本的に送信時に検証するフォームの送信アクションを持っています。

フォームを送信すると、エラーがレンダリングされるので、期待通りに機能しています。しかし、私はフォームを無効にすると、私は、ajaxのリクエストをしたくない提出を行うときに問題が発生します。最初のサブミット時にemailErrorが設定されていない（デフォルト）が、2番目のサブミット状態には正しいemailErrorがtrueに設定されていることがわかります。

私は反応文書から、setStateは保留状態で即座に利用できないことを理解しています。

どうすればこの問題を回避できますか？

私のコードは、あなたがvalidateEmailを呼び出すが、何も返さないので、機能の残りはのは、呼び出される

registerで

import React, { Component } from 'react'; 
import isEmail from 'validator/lib/isEmail'; 

class formExample extends Component 
{ 
    constructor(props) { 
     super(props); 

     this.state = { 
      email: '', 
      emailError: false 
     }; 

     this.register = this.register.bind(this); 
     this.updateState = this.updateState.bind(this); 
    } 

    updateState(e) { 
     this.setState({ email: e.target.value }); 
    } 

    validateEmail() { 
     if (!isEmail(this.state.email)) { 
      console.log("setting state"); 
      this.setState({ emailError: true }); 
      return; 
     } 
     console.log(this.state); 
     this.setState({ emailError: false }); 
    } 

    register(event) { 
     event.preventDefault(); 

      this.validateEmail(); 

      //only if valid email then submit further 
    } 

    render() { 
     return (
       <div className="row"> 
       <div className="col-md-2 col-md-offset-4"></div> 
       <div className="col-lg-6 col-lg-offset-3"> 
        <form role="form" id="subscribe" onSubmit={this.register}> 
        <div className="form-group"> 
         <input type="text" className="form-control" placeholder="Email..." name="email" value={this.state.email} onChange={this.updateState} /> 
         <div className="errorMessage"> 
          {this.state.emailError ? 'Email address is invalid' : ''} 
         </div> 
        </div> 
        <div className="input-group input-group-md inputPadding"> 
         <span className="input-group-btn"> 
          <button className="btn btn-success btn-lg" type="submit"> 
          Submit 
          </button> 
         </span> 
        </div> 
        </form> 
       </div> 
       </div> 
     ); 
    } 
} 

export default formExample; 

Answer 1

を下回っています。 setStateは非同期です！残りの登録簿でそれを信じることはできません。

はこれを試してみてください：

validateEmail() { 
     const isEmailError = !isEmail(this.state.email) 
     this.setState({ emailError: isEmailError }); 
     return isEmailError; 
    } 

register(event) { 
     if(this.validateEmail()){ 
      //ajax 
     }; 
    } 

他のアプローチは次のようになります。

validateEmail(ajaxCb) { 
     const isEmailError = !isEmail(this.state.email) 
     this.setState({ emailError: isEmailError }, ajaxCb); 
    } 

register(event) { 
     function ajaxCb(){...} 
     this.validateEmail(ajaxCb) 
    }