什么是在反应js中进行API调用的正确方法? [英] what is right way to do API call in react js?
本文介绍了什么是在反应js中进行API调用的正确方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我最近从Angular搬到了ReactJs。我正在使用jQuery进行API调用。我有一个API,它返回一个随机用户列表,打印在列表中。
I have recently moved from Angular to ReactJs. I am using jQuery for API calls. I have an API which returns a random user list that is to be printed in a list.
我不知道如何编写我的API调用。这是什么最佳做法?
I am not sure how to write my API calls. What is best practice for this?
我尝试了以下但我没有得到任何输出。如有必要,我愿意实施替代API库。
I tried the following but I am not getting any output. I am open to implementing alternative API libraries if necessary.
以下是我的代码:
import React from 'react';
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {
person: []
};
}
UserList(){
return $.getJSON('https://randomuser.me/api/')
.then(function(data) {
return data.results;
});
}
render() {
this.UserList().then(function(res){
this.state = {person: res};
});
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">
{this.state.person.map((item, i) =>{
return(
<h1>{item.name.first}</h1>
<span>{item.cell}, {item.email}</span>
)
})}
<div>
</div>
)
}
}
推荐答案
在这种情况下,您可以在 componentDidMount
,然后更新州
In this case, you can do ajax call inside componentDidMount
, and then update state
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {person: []};
}
componentDidMount() {
this.UserList();
}
UserList() {
$.getJSON('https://randomuser.me/api/')
.then(({ results }) => this.setState({ person: results }));
}
render() {
const persons = this.state.person.map((item, i) => (
<div>
<h1>{ item.name.first }</h1>
<span>{ item.cell }, { item.email }</span>
</div>
));
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">{ persons }</div>
</div>
);
}
}
这篇关于什么是在反应js中进行API调用的正确方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文