У меня есть следующий компонент, который поддерживает состояние, которое обновляется, когда событие запускается в конкретном элементе, и когда состояние обновляется, оно передается в качестве опоры другому компоненту. В настоящее время я пытаюсь понять, почему возникает следующая ошибка: "this.setState не является функцией", скорее всего, не привязана к правильному контексту. Но я не уверен в этом, правильно ли я это делаю?
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>
);
}
}
EDIT: Я просто понял, что контекст изменяется, когда функция "onreadyStateChange", поэтому я сделал следующее в searchGif
searchGif(){
//other logic
var self = this;
xhr.onreadystatechange = function(){
//ajax logic
self.setState({results: repsonse});
}
}