javascript - single - setstate array react

this.setState no es una función

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo acceder al ''this` correcto dentro de una devolución de llamada? 6 respuestas

Tengo el siguiente componente, que mantiene el estado que se actualiza cuando el evento se activa en un elemento específico y cuando el estado se actualiza se transmite como un apoyo a otro componente. Actualmente estoy intentando decir por qué aparece el siguiente error: "this.setState no es una función", lo más probable es que no esté vinculado al contexto correcto. Pero no estoy seguro de esto, ¿estoy haciendo esto bien?

export default class SearchBox extends Component{
constructor(){
super()
console.log("search box imported");
this.state = {
results:[]
};
}
//this.setState({result: arrayExample})
searchGif(event) {
if(event.keyCode == 13){
let inputVal = this.refs.query.value;
let xhr = new XMLHttpRequest();
xhr.open(''GET'', ''http://api.giphy.com/v1/gifs/search?q=''+inputVal+''&api_key=dc6zaTOxFJmzC'', true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// this.response = JSON.parse(xhr.responseText);
let returnedObj = JSON.parse(xhr.responseText);
//console.log(returnedObj.data);
let response = returnedObj.data.map(function(record){
let reformattedArray = { key: record.id,
id: record.id,
thumbnailUrl: record.images.fixed_height_small_still.url
};
return reformattedArray;
});
console.log(response);
this.setState({results: response});
}
}
xhr.send();
}
}
render(){
return(
<div>
<input className="search-input" ref="query" onKeyDown={this.searchGif.bind(this)} name="search" placeholder="Search"/>
<GifSwatch data={this.state.results} />
</div>
);
}
}

EDITAR: Me acabo de dar cuenta de que el contexto se cambia cuando la función "onreadyStateChange", así que hice lo siguiente en searchGif

searchGif(){
//other logic
var self = this;
xhr.onreadystatechange = function(){
//ajax logic
self.setState({results: repsonse});
}
}

Answer 1

Estás perdiendo la clase Reaccionar en this contexto. Enlazarlo, y también vincularlo en la función de devolución de llamada asíncrona también.

constructor(props){
super(props);
console.log("search box imported");
this.state = {
results:[]
};
this.searchGif = this.searchGif.bind(this);
}
searchGif(event) {
// ... code here
xhr.onreadystatechange = () => {
// ... code here
this.setState();
}
}

Lo mejor de las funciones de flecha es que unen tu contexto y la sintaxis también es increíble. desventaja es el soporte del navegador. Asegúrese de tener un polyfil o un proceso de compilación para compilarlo en la sintaxis de ES5 para el rendimiento del navegador cruzado.

Si no puede hacer ninguno de estos, simplemente haga una variable de sombra de su este contexto fuera de la función async onreadystatechange y onreadystatechange en lugar de this .