javascript - 在同一个组件中进行两个 API 调用 - ReactJS

Question

我正在构建一个可生成两个表的应用程序，每个表都有 5 个结果。当涉及到第二个表的映射时，我似乎无法弄清楚如何破解代码。表一是{renderItems}，表二是{renderUsers}。每个 API 调用位于 App.js 文件的顶部，详细信息如下，分别为“repoURL”和“userURL”。

import React, { Component } from 'react';
import axios from 'axios';

const repoURL = 'https://api.github.com/search/repositories?q=stars:>1&s=stars&type=Repositories&per_page=5';
const userURL = 'https://api.github.com/search/users?q=created:>=2016-05-29&type=Users&s=followers&per_page=5';

export default class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     items: []
   }
 }

 componentDidMount() {
   var _this = this;

   axios.get(repoURL)
   .then(function(res){
     console.log(res)
     _this.setState({
       items: res.data.items
     });
   })
   .catch(function(e) {
     console.log('ERROR ', e);
   })

   axios.get(userURL)
   .then(function(res){
     console.log(res)
     _this.setState({
       users: res.data.items
     });
   })
   .catch(function(e) {
     console.log('ERROR ', e);
   })
 }

 render() {
   const renderItems = this.state.items.map(function(item, i) {
     return (
       <div key={i} className="row">
         <div className="col-md-3">{item.id}</div>
         <div className="col-md-3">{item.name}</div>
         <div className="col-md-3">{item.description}</div>
         <div className="col-md-3">{item.stargazers_count}</div>
       </div>
     );
   });
   console.log(renderItems)
     const renderUsers = this.state.items.map(function(item, i) {
       return (
         <div key={i} className="row">
           <div className="col-md-3">{item.id}</div>
           <div className="col-md-3">{item.name}</div>
           <div className="col-md-3">{item.description}</div>
           <div className="col-md-3">{item.stargazers_count}</div>
         </div>
       );
     });
     console.log(renderUsers)
   return (
     <div className="App">

         <div className="row">

           <div className="col-md-6 ">
             <button type="button" id="hot_repo" className="btn btn-lg btn-danger">Hot Repositories</button>
           </div>
           <div className="col-md-6 ">
             <button type="button" id="prolific_users" className="btn btn-lg btn-success">Prolific Users</button>
           </div>

           <div id="repoTable" className="col-md-6 panel panel-default">
             <div id="repoHeader" className="panel-heading">5 Most Starred Repositories Last Month</div>
             <div className="repoSubHeader panel-body">
               <div id="repoId" className="col-md-3">ID</div>
               <div id="repoName" className="col-md-3">Name</div>
               <div id="repoDescription" className="col-md-3">Description</div>
               <div id="repoStars" className="col-md-3">Stars</div>
             </div>
             <div className="row">
             {renderItems}
             </div>
           </div>

           <div id="userTable" className="col-md-6 panel panel-default">
             <div id="userHeader" className="panel-heading">5 Most Active Users</div>
             <div className="userSubHeader panel-body">
               <div id="userId" className="col-md-3">ID</div>
               <div id="userLogin" className="col-md-3">Login</div>
               <div id="userAvatar" className="col-md-3">Avatar</div>
               <div id="userFollowers" className="col-md-3">Followers</div>
             </div>
             <div className="row">
             {renderUsers}
             </div>
           </div>

         </div>
     </div>
   );
 }
}

我觉得我错过了一些明显的东西，但我已经研究它很长时间了，在这一点上它对我来说并不明显。任何帮助表示赞赏。

Answer 1

您必须在构造函数中将状态初始化为:

this.state = {
    users: [],
    items: []
}

然后您必须将状态项映射为:

const renderItems = this.state.items.map(function(item, i) {
  return (
    <div key={i} className="row">
      <div className="col-md-3">{item.id}</div>
      <div className="col-md-3">{item.name}</div>
      <div className="col-md-3">{item.description}</div>
      <div className="col-md-3">{item.stargazers_count}</div>
    </div>
  );
});

const renderUsers = this.state.users.map(function(item, i) {
  return (
    <div key={i} className="row">
      <div className="col-md-3">{item.id}</div>
      <div className="col-md-3">{item.name}</div>
      <div className="col-md-3">{item.description}</div>
      <div className="col-md-3">{item.stargazers_count}</div>
    </div>
  );
});
console.log(renderUsers)

这是假设您的 userUrl 返回:

{
    items: [
        user1,
        user2,
        ...
    ]
}

如果没有，那么您需要相应地更改这部分。

axios.get(userURL)
.then(function(res){
  console.log(res)
  _this.setState({
    users: res.data.items
  });
})
.catch(function(e) {
  console.log('ERROR ', e);
})