如何在反应中设置来自axios的响应状态
How do I set the state of a get response in axios?
axios.get(response){
this.setState({events: response.data})
}
解决方案
You have a syntax error here. You should try this instead
var self = this;
axios.get('/url')
.then(function (response) {
console.log(response);
self.setState({events: response.data})
})
.catch(function (error) {
console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'
There are a few things to note here:
axios.get
is an asynchronous function which means that the rest of the code will be executed .And when the response of the server arrives, the function passed tothen
will be executed. The return value ofaxios.get('url')
is called a promise object. You can read more about it herethis
keyword has a different value depending of where it is called.this
inthis.setState
should refer to the constructor object, and when you callthis
inside a function, it refers to thewindow
object. That is why i assignedthis
to the variableself
. You can read more about this here
Pro tip:
If you use ES6, you would want to use arrow functions (which don't have their own this
) and use this.setState
without assigning this
to a variable. more about it here
axios.get('/url')
.then((response) => {
console.log(response);
this.setState({events: response.data})
})
.catch((error)=>{
console.log(error);
});
Here is a complete example https://codesandbox.io/s/rm4pyq9m0o containing best practices commonly used to fetch data including error handling, try again and loading. This provides a better User experience. You are encouraged to modify the code and play around to get more insights about it.
相关文章