如何在反应中设置来自axios的响应状态

本文介绍了如何在反应中设置来自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 to then will be executed. The return value of axios.get('url') is called a promise object. You can read more about it here
• this keyword has a different value depending of where it is called. this in this.setState should refer to the constructor object, and when you call this inside a function, it refers to the window object. That is why i assigned this to the variable self. 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 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.