0

Estoy desarrollando una consulta a una api usando axios con react. Las respuestan llegan correctamente pero no estoy pudiendo actualizar el estado de una variable, que muestra errores desde el servidor o login correcto

En la consola, me diceque el operador this es no definido.

El code de mi funcion es la siguiente:

consumirApiLogin() {
    const payload={
        "_username":this.state.username,
        "_password":this.state.password,
    }
    axios.post(API_LOGIN, payload)
        .then(function (response) {
            this.setState({errorApi: response.data})
        })
        .catch(function (e) {
            console.log(e);
            let error = '';
            if(e.response)
            {
                let error = e.response.message;
            }
            this.setState({errorApi: error})
        });
}

Mi constructor es el siguiente:

 constructor(props){
    super(props);

    this.state = ({
        username:'',
        password:'',
        errors: {},
        errorApi: ''
    })

    this.cambioUsername = this.cambioUsername.bind(this);
    this.cambioPassword = this.cambioPassword.bind(this);
    this.handleSubmit   = this.handleSubmit.bind(this); 
    this.consumirApiLogin = this.consumirApiLogin.bind(this);
    this.validarFormulario = this.validarFormulario.bind(this);
}

Cualquier ayuda es bienvenida!Saludos!

1 respuesta 1

2

Parece que te saltaste algunos conceptos de JavaScript antes de empezar con React y uno de estos es el que te está causando problemas.

En JavaScript, toda función (no arrow function) tiene un contenedor o bolsa conocida como contexto o scope. Cuando tu usas this dentro de una función en realidad estás haciendo referencia a este contenedor o a contenedores superiores (chaining). En este caso, estás haciendo uso de this dentro de un callback, un callback no tiene un contexto superior, por ende, this siempre hará referencia al mismo contexto del callback.

this.setState

En realidad está haciendo algo como:

[callback].setState

Porque como expliqué arriba, this hace referencia al contexto en donde se llama. ¿Qué es lo que tienes que hacer para solucionar el problema?

Simple, convertir tu callback a arrow function:

.then((response) => {
  this.setState({errorApi: response.data})
})

Lo mismo para el catch.

1
  • Muchas gracias por las observaciones y la respuesta! Commented el 5 may. 2020 a las 21:53

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.