vacio - undefined javascript error

TypeError: no se puede leer la propiedad ''setState'' de undefined

Question

Estoy tratando de establecer el estado de un componente después de que una devolución de llamada ajax recibe datos de la API REST. aquí está mi código para el constructor de componentes

constructor(props) {
    super(props);
    this.state = { posts: [] };
    this.getPosts = this.getPosts.bind(this);
}

Luego tengo un método componentDidMount que se parece a lo siguiente.

componentDidMount() {
        this.getPosts();
}

Ahora aquí está mi función getPosts donde estoy haciendo la solicitud ajax.

getPosts = () =>  {
    $.ajax({
        type: ''get'',
        url: urlname,
        success: function(data) {
            this.setState( { posts: data } )
        }
    });
}

Estoy tratando de establecer el estado pero recibo el siguiente error.

this.setState is not a function

No estoy realmente seguro de qué está causando esto. Sería realmente útil si alguien me señalara la dirección correcta. Gracias por adelantado.

Answer 1

Debe almacenar el contexto en una variable ya que "esta" referencia no estará disponible en la devolución de llamada. Pruebe la siguiente solución:

getPosts = () =>  {
let that=this;
    $.ajax({
        type: ''get'',
        url: urlname,
        success: function(data) {
            that.setState( { posts: data } )
        }
    });
}

Answer 2

El problema está relacionado con perder el contexto de this . Por favor intente esto:

let self = this;
getPosts = () =>  {
    $.ajax({
        type: ''get'',
        url: urlname,
        success: function(data) {
            self.setState( { posts: data } )
        }
    });
}

o puedes usar bind:

getPosts = () =>  {
        $.ajax({
            type: ''get'',
            url: urlname,
            success: function(data) {
                self.setState( { posts: data } )
            }
        });
    }.bind(this)

Answer 3

Vincula la función de devolución de llamada también para que this dentro de la devolución de llamada apunte al contexto del componente Reaccionar y no a la función de devolución de llamada

getPosts = () =>  {
    $.ajax({
        type: ''get'',
        url: urlname,
        success: (data) => {
            this.setState( { posts: data } )
        }
    });
}

o podrías usar bind como

getPosts = () =>  {
    $.ajax({
        type: ''get'',
        url: urlname,
        success: function(data) {
            this.setState({ posts: data })
        }.bind(this)
    });
}