我最近从 Angular 转到了 ReactJs。我正在使用 jQuery 进行 API 调用。我有一个 API,它返回要打印在列表中的随机用户列表。
我不确定如何编写我的 API 调用。对此的最佳做法是什么?
我尝试了以下但我没有得到任何输出。如有必要,我愿意实施替代 API 库。
下面是我的代码:
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> ) } }
在这种情况下,你可以在里面做ajax调用componentDidMount,然后更新state
componentDidMount
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> ); } }