reactjs - ReactJS ValidateForm onSubmit には数回のクリックが必要です

Question

ログインフォームがあります。Reactで検証してみました。form タグの OnSubmit では、handleSubmit() を呼び出します。この関数は、validateForm() を呼び出す validateField() を呼び出します。formValid が true かどうかを確認します。正しい電子メールとパスワードの形式を入力して [送信] をクリックすると、偽のメッセージが返されます。もう一度試してみると、偽に戻ります。

3 回目に [送信] をクリックすると、フォームが有効になり、express に送信されます。フォーム有効への状態の変化をすぐに認識しないのはなぜですか?どうすれば検証をより適切に反応させることができますか?

ありがとうございます

 import React, { Component } from 'react';
    import './resources/Home.css';
    import FormErrors from './FormErrors.js';
    import { Redirect } from 'react-router-dom';

    class Home extends Component {

      constructor(props){
        super(props)

        this.state = {
          email: '',
          password: '',
          formErrors: {email: '', password: ''},
          emailValid: false,
          passwordValid: false,
          formValid: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.validateField = this.validateField.bind(this);
        this.validateForm = this.validateForm.bind(this);
      }

      onChange(event){
        event.preventDefault();
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({[name]: value});

      }

      validateField() {
        let fieldValidationErrors = this.state.formErrors;
        let emailValid = this.state.emailValid;
        let passwordValid = this.state.passwordValid;


            emailValid = this.state.email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{0,})$/i);
            fieldValidationErrors.email = emailValid ? '' : 'email is invalid';

            passwordValid = this.state.password.length >= 6;
            fieldValidationErrors.password = passwordValid ? '': ' password is too short';

        this.setState({formErrors: fieldValidationErrors,
                        emailValid: emailValid,
                        passwordValid: passwordValid
                      }, this.validateForm());

      }

      validateForm() {
        this.setState({formValid: this.state.emailValid && this.state.passwordValid});
      }

      handleSubmit(event) {
        event.preventDefault();
        console.log('pressed submit');
        console.log('form valid: ' + this.state.formValid);
        this.validateField(); 

        if ( this.state.formValid === true) {
          console.log('here');

        fetch('/login', {
          method: 'post',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({
            "email" : this.state.email,
            "password" : this.state.password
          })
         })
         .then(response => response.json().then(data => ({status: response.status,data:data})))
         .then(res => {  
           res.status === 200 ? alert('success') : alert('fail')
          res.data.errors.map(x => alert(x.msg)) })
         }

      }

      render() {

        return (
          <div class="page">
            <div className="Home">

              <div id="formWrap" >
             {// <div className="panel panel-default">
               // <FormErrors formErrors={this.state.formErrors} />
            //  </div>
              }
              <h2>Login</h2>
                <form id="sendInfo" onSubmit={this.handleSubmit} >

                  {this.state.formValid ? '' :this.state.formErrors.email}
                  <input data-lpignore="true" type="text" placeholder="email" name="em"  name="email" value={this.state.email} onChange={this.onChange}/>

                  {this.state.formValid ?  '' : this.state.formErrors.password }
                  <input data-lpignore="true" type="text" placeholder="password" name="pw" name="password" value={this.state.password} onChange={this.onChange}/>


                  <input type="submit" id="submit"  value="submit"/>

                </form>
              </div>

            </div>
          </div>
        );
      }
    }

    export default Home;