Question

我正在构建一个生成两个表的应用程序，每个表有5个结果。在映射第二个表时，我似乎无法弄清楚如何破解代码。表一是{renderItems}，表二是{renderUsers}。每个API的API调用都位于下面详细介绍的App.js文件的顶部，因为它们是“repoURL＆＃39;和＆＃39; userURL＆＃39;分别

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

Answer 2

第一个问题我认为你正在做地图，为const renderUsers分配错误的地图this.state.items。

其次，您需要在构造函数的users中声明this.state键。

this.setState({ users: [], items: [] })

在同一个组件中进行两次API调用 - reactjs

2 个答案: