I have a handler that fires upon change in the input field. However, when I log the state to the console resData is 'undefined'? It's impossible because console.log(body) does return results.
handlePersonNameChange(event) {
var resData
request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) {
console.log(body)
resData = body
})
this.setState({personData: resData});
console.log(this.state)
}
A request call is asynchrone, you should put the this.setState within the response body.
Also this.setState is asynchrone, to see the result you should use the callback function. This funciton is called after the new state is set.
handlePersonNameChange(event) {
var resData
request('https://swapi.co/api/people/?search='+event.target.value,
function (error,response,body) {
console.log(body)
resData = body
this.setState({personData: resData}, function() {
console.log(this.state)
})
})
}
More info about this.setState() can be found here
You need to setState inside the request callback, for example :
request('https://swapi.co/api/people/?search='+event.target.value, function (error,response,body) {
console.log(body)
resData = body
this.setState({personData: resData});
})
because your request hasn't resovled when you do setState in your example.
this.setState({ state : "new1" })
This method is not synchronous so when you are logging the state it is not yet updated.
You should log it in componentWillUpdate lifecycle method.
setState()thenconsole.log(this.state)on the next line and expect to see the state updated.