我该如何在axios中设置get请求的状态?
axios.get(response){
this.setState({events: response.data})
}
我该如何在axios中设置get请求的状态?
axios.get(response){
this.setState({events: response.data})
}
这里有语法错误。你应该尝试这个:
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'
这里有几个需要注意的事项:
axios.get
是一个异步函数,这意味着其余的代码会先被执行。当服务器响应到达时,传递给 then
的函数将被执行。axios.get('url')
的返回值被称为 Promise 对象。您可以在这里了解更多。this
关键字的值取决于它被调用的位置。在 this.setState
中,应该引用构造函数对象,而在函数内部调用 this
时,则指向 window
对象。这就是为什么我将 this
赋值给变量 self
的原因。您可以在这里了解更多。专业提示:
如果您使用 ES6,您会希望使用箭头函数(它们没有自己的 this
),并且无需将 this
分配给变量即可使用 this.setState
。在这里了解更多。
axios.get('/url')
.then((response) => {
console.log(response);
this.setState({events: response.data})
})
.catch((error)=>{
console.log(error);
});
这里提供了一个完整的示例,包括常用的获取数据的最佳实践,例如错误处理、重试和加载。这可以提供更好的用户体验。鼓励您修改代码并进行尝试以获得更多内部信息。https://codesandbox.io/s/rm4pyq9m0o
这不起作用是因为axios内部的“this”与你的React组件不同。“this”在axios中指的是axios对象,而不是你的React组件。你可以使用 .bind() 来解决这个问题。
此外,axios没有被正确地使用。
应该长成这样:
axios.get("/yourURL").then(function(response) {
this.setState({ events: response.data });
}.bind(this));
另外,如果您使用es6,可以将该函数替换为箭头函数,而无需使用绑定(bind)即可获得相同的效果
axios.get("/yourURL").then(response => {
this.setState({ events: response.data });
});
只需尝试使用此Node.js
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
示例:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
var self= this; // self will now be referred to your component
axios.get("http://localhost:3001/get_user?id=" + id)
.then(function (response) {
if(response.data.rows != null)
user_detail = response.data.rows;
console.log(response);
self.setState({email: user_detail.name, name: user_detail.name})
})
我以前在学习React时也遇到过类似的Promise问题。我的解决方法是将API调用放在componentDidMount
方法中,并将状态设置为初始值。在数据获取期间,我使用了一个加载器。
componentDidMount() {
const self = this;
axios.get(response){
self.setState({ events: response.data });
}
目前,我会使用类似于checkenrode所说的东西。