TypeError: no se puede leer la propiedad ‘setState’ de undefined

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

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

Entonces tengo un método componentDidMount que parece seguir.

 componentDidMount() { this.getPosts(); } 

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

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

Estoy tratando de establecer el Estado, pero me aparece el siguiente error.

 this.setState is not a function 

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

Vincula la función de callback también para que this dentro de la callback apunte al contexto del Componente de Reacción y no a la función de callback

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

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

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

o puede usar bind:

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

Debe almacenar el contexto en una variable ya que “esta” referencia no estará disponible en la callback. Pruebe la siguiente solución:

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