在 react js 中进行 API 调用的正确方法是什么? [英] what is right way to do API call in react js?

问题描述

我最近从 Angular 转到了 ReactJs.我正在使用 jQuery 进行 API 调用.我有一个 API，它返回要打印在列表中的随机用户列表.

我不确定如何编写我的 API 调用.这方面的最佳做法是什么?

我尝试了以下方法，但没有得到任何输出.如有必要，我愿意实施替代 API 库.

下面是我的代码:

import React from 'react';导出默认类 UserList 扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {人: []};}用户列表(){返回 $.getJSON('https://randomuser.me/api/').then(函数(数据){返回数据.结果；});}使成为() {this.UserList().then(function(res){this.state = {人:res}；});返回 (<div id="layout-content" className="layout-content-wrapper"><div className="面板列表">{this.state.person.map((item, i) =>{返回(<h1>{item.name.first}</h1><span>{item.cell}、{item.email}</span>)})}
</div>)}}

解决方案

在这种情况下，你可以在 componentDidMount，然后更新state

导出默认类 UserList 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {人:[]};}组件DidMount() {this.UserList();}用户列表(){$.getJSON('https://randomuser.me/api/').then(({ 结果}) => this.setState({ person: results }));}使成为() {常人 = this.state.person.map((item, i) => (
<h1>{ item.name.first }</h1><span>{ item.cell }, { item.email }</span></div>));返回 (<div id="layout-content" className="layout-content-wrapper"><div className="panel-list">{ 人 }</div></div>);}}

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.

I am not sure how to write my API calls. What is best practice for this?

I tried the following but I am not getting any output. I am open to implementing alternative API libraries if necessary.

Below is my code:

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>
    )
  }
}

解决方案

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>
    );
  }
}

这篇关于在 react js 中进行 API 调用的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！