0

en el estado de mi aplicacion tengo los campos que uso para guardar los datos de un formulario

this.state = {
        nombre: '',
        apellido: '',
        usuario: '',
        email: '',
        sexo: '',
        date: new Date(),
        password: '',
        reppassword: '',
        errors: {
            name: false,
            lastName: false,
            user: false,
            email: false,
            sex: false,
            password: false,
            repassword: false
        },
        helperText: {
            nombre: '',
            apellido: '',
            usuario: '',
            sexo: '',
            email: '',
            password: '',
            reppassword: '',
        }
    }

estas son mis funciones que uso para controlar los input de tipo password:

PasswordChangue(event: React.ChangeEvent<HTMLInputElement>): any{
    this.setState({password: event.target.value})
    if(this.state.password.length < 6){
        this.setState({errors: {password: true}})
        this.setState({helperText: {password: 'Su contraseña es demasiado corta.'}})
    }else{
        this.setState({errors: {password: false}})
        this.setState({helperText: {password: 'Bien echo.!'}})
    }
}

RepPasswordChangue(event: React.ChangeEvent<HTMLInputElement>): any{
    this.setState({reppassword: event.target.value})
        if(this.state.password === this.state.reppassword){
            this.setState({errors: {repassword: false}})
            this.setState({helperText: {reppassword: 'Bien echo.!'}})
        }else{
           this.setState({errors: {repassword: true}})
           this.setState({helperText: {reppassword: 'Sus contraseña no coinciden.'}})
        }
}

todo normal, hasta da la impresion que el codigo esta perfecto, lo que sucede es que en la confirmacion de la contraseña. cuando las contraseñas coinciden el helperText me sigue apareciendo como 'Sus contraseña no coinciden.', no cambia a 'Bien echo.!', no entiendo por que

2 respuestas 2

0

El método setState es asíncrono. Se me ocurre que al momento de que se ejecuta la siguiente linea de código:

if(this.state.password === this.state.reppassword){

la variable reppassword aun contiene el valor anterior. Podrías buscar una alternativa, por ejemplo compararlo contra el valor de tu evento en lugar de la variable del estado, algo así:

if(this.state.password === event.target.value){
1
  • Ya probé con ese método pero sigo teniendo el mismo error
    – Enzo
    Commented el 18 jun. 2020 a las 5:35
0

mi solucion fue usar async await en elmetodo RepPasswordChangue() ya que setState es un metodo asincrono, se ejecuta ese metodo y cuando termina se ejecuta el condicional if.

async RepPasswordChangue(event: React.ChangeEvent<HTMLInputElement>){
    await this.setState({reppassword: event.target.value})
    if(this.state.password === this.state.reppassword){
        this.setState({errors: {repassword: false}})
        this.setState({helperText: {reppassword: 'Bien echo.!'}})
    }else{
        this.setState({errors: {repassword: true}})
        this.setState({helperText: {reppassword: 'Sus contraseña no coinciden.'}})
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.