How do code to look an if just after you have changed the prop of an object?

Asked

Viewed 66 times

1

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

The problem

Within the handleClick method it makes the status changes if the field is correctly filled and at the end it makes a final check on all fields. If everything is gray sends the data, if it does not maintain the error. But the first time I click sends even being wrong, and only the second time I click discovers the error. This happens because you are entering my if before making the changes in the fields using setState. I tried to use setTimeout but it didn’t work and I was told it wasn’t good practice. How to proceed if is async and only be activated when States are up to date?

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';
    }
javascript front-end react

  • Acting on the basis of style rather than the outcome of validation is bad practice, and it becomes evident in your case. How are the fields being validated? Also put the code that validates the question

  • That’s a good tip, kid, I’ll look into it.

1 answer

1


EDITION

You had ordered async so I was confused.

In that issue I removed the Component with asynchronous method that had nothing to do with the question.

Now let’s get down to business

//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}>
        );
    }
}

Browser other questions tagged javascript front-end react

You are not signed in. Login or sign up in order to post.