在 react js 中进行 API 调用的正确方法是什么？

Question

我最近从 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>
    )
  }
}

原文由 Raj Rj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在这种情况下，您可以在 componentDidMount 内部进行 ajax 调用，然后更新 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>
 );
 }
 }

原文由 Oleksandr T. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可能想查看 Flux Architecture 。我还建议查看 React-Redux Implementation 。将您的 api 调用放在您的操作中。它比将它们全部放在组件中要干净得多。

操作是一种辅助方法，您可以调用它们来更改应用程序状态或执行 api 调用。

原文由 Jei Trooper 发布，翻译遵循 CC BY-SA 4.0 许可协议