How do I make the code look at an if only after having changed the prop of an object?

Navigation
1

I have a form that when I click on send it leaves red the field that is empty. It makes different validations in each of the fields. Only when all of the fields are greyed out does it send the data via post and disables the error message.

The problem

Within the handleClick method, it does the state changes if the field is correctly filled, and in the end does a final check on all fields. If everything is gray it sends the data if it does not keep the error. But the first time I click it it sends even though it is wrong, and only the second time I click I discover the error. This is because it is entering my if before making the changes in the fields using setState . I tried using setTimeout but it did not work and I was told not to be good practice. How do I get async if and only to be enabled when states are upgraded? 

if ((valueColor && nameColor && lastNameColor && emailColor 
      && cardColor && cvvColor && cpfColor
      && dateColor && periodicityColor) === 'grey') {
      console.log('dentro'); this.errorMessage.message = 'none'; //this.handleSubmit();
    } else {
      console.log('fora'); this.errorMessage.message = 'block';
    }
    
asked by anonymous 29.01.2018 / 18:54

1 answer

1

EDITION

You had requested async and I was confused.

In this issue I removed the component with an asynchronous method that had nothing to do with the question.

Now let's go for what matters 

//Cabeçalho dos exemplos abaixo
import React from "react";

function verifyEmail(email){
    let phone = document.querySelector(".phone");
    ...whatever
}
function verifyPhone()
{
    let email = document.querySelector(".email");
    ...whatever
}

Without using async and without using this.state 

class Register extends React.Component
{
    componentWillMount() {
        this.fields = {email:false,phone:false};
    }
    handleClick = () => {
        this.fields.email = verifyEmail();
        this.fields.phone = verifyPhone();

        if (this.fields.email === true && this.fields.phone === true) {
            ...Do something
        } else {
            ...Error
        }
    }
    render() {
        return (
            <input onClick={this.handleClick}>
        );
    }
}

Using callbacks in function this.setState([Object, Callback]) 

class Register extends React.Component
{
    componentWillMount() {
        this.setState({
            email: false,
            phone: false //false é que não está correto
        });
    }
    handleClick = () => {
        let email = verifyEmail();
        let phone = verifyPhone();

        this.setState({
            email: email, //resultado da função verifyEmail()
            phone: phone //resultado da função verifyPhone()
        }, () => {
            if (this.state.email === true && this.state.phone === true) {
                ...Do something
            } else {
                ...Error
            }
        });

        //NOTE: setState acima tem um callback como segundo parametro,
        //quando os estados atualizarem, esse calback é chamado
    }

    render() {
        return (
            <input onClick={this.handleClick}>
        );
    }
}
    
29.01.2018 / 23:27
How are modifiers implemented in TypeScript? Ninject Not creating the NinjectWebCommon class