I'm having a react component, which has a function with a axios call, to retrieve data.
That data is being put into an array, and that array is being send to the state.
However, when trying to set I get the error:
Cannot read property 'setState' of undefined
I have bind the function in the constructor, and the setState is outside the axios call.
My code:
import * as React from "react";
import * as ReactDOM from "react-dom";
import axios from "axios";
import { host } from "../../searchkitConfig/const_host.js";
import {
SearchkitComponent
} from "searchkit";
export class AutoCompleteContainer extends SearchkitComponent {
constructor(props){
super(props);
this.state = {
"suggestCallReady" : false,
"suggestions":[]
};
this.suggestCall = this.suggestCall.bind();
}
suggestCall(){
const query =
{
"_source": [
"suggest-auteur"
],
"suggest": {
"auteur_suggest": {
"prefix": "te",
"completion": {
"field": "suggest-auteur"
}
},
"hoofdtitel_suggest": {
"prefix": "te",
"completion": {
"field": "suggest-hoofdtitel"
}
},
"imprint_suggest": {
"prefix": "te",
"completion": {
"field": "suggest-imprint"
}
}
}
};
var suggestArray = [];
axios
.post(host + "/_search", query, {
headers: {
"Content-Type": "application/json"
}
})
.then( res => {
for(var i = 0; i < res.data.suggest.auteur_suggest[0].options.length; i++){
suggestArray.push(res.data.suggest.auteur_suggest[0].options[i].text);
}
});
console.log('suggestArray:',suggestArray)
this.setState({"suggestions":suggestArray});
}
componentDidMount(){
this.suggestCall();
}
render(){
return(
{this.state.suggestions.length >1 ? this.state.suggestions : "No suggestions has been found"}
)
}
}
No comments:
Post a Comment