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

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

问题描述

我最近从 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 调用的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！