如何使用 React 创建分页答案

【问题标题】：how to create pagination with React如何使用 React 创建分页
【发布时间】：2018-04-15 07:26:01
【问题描述】：

我从github api获取数据

我有我需要显示的所有数据，但我想拼接它，这样我每页只能获得 20 个存储库。

我不想要一个框架或插件。

总的来说，我对 React 和 JS 还很陌生，所以我不知道从哪里开始，也不知道接下来要做什么来创建分页。

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


class Apirequest extends Component {
    constructor(){
         super();
         this.state = {
             githubData: [],
         };
     } 
     componentDidMount() {
       axios.get('https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&per_page=100')
       .then(res => {
         console.log('res', res)
         this.setState({ githubData: res.data.items})
       })
     }

     render() {
       const { githubData } = this.state
         return(
             <div className="container">
                 {githubData.map((name, index) => 
                   <table key={name.id}>
                    <tr>   
                     <th><img src={name.owner.avatar_url}/></th>
                     <td>{name.owner.login}<div className="border-bottom"></div></td>
                     <td>{name.description}<div className="border-bottom"></div></td>
                     <td><a href={name.homepage}>{name.homepage}</a></td>
                    </tr> 
                 </table> 
                 )}
             </div>
         )
     }
 }
export default Apirequest;

【问题讨论】：

你的问题很广泛。如果您提出更具体的问题，您可能会得到更好的答复。我相信您想知道的是如何创建分页。我敢肯定，如果您在 StackOverflow 上四处搜索，您会发现很多现有的问题都有这个问题的答案。

标签： javascript git reactjs api pagination

【解决方案1】：

首先，您的map 函数逻辑错误。您正在为每条记录创建一个表，并且您应该只为每条记录创建一行。 table 标签应该在地图之外。

 render() {
   const { githubData } = this.state
     return(
         <div className="container">
           <table key={name.id}>
             {githubData.map((name, index) => 
                <tr>   
                 <th><img src={name.owner.avatar_url}/></th>
                 <td>{name.owner.login}<div className="border-bottom"></div></td>
                 <td>{name.description}<div className="border-bottom"></div></td>
                 <td><a href={name.homepage}>{name.homepage}</a></td>
                </tr> 
             )}
           </table> 
         </div>
     )
 }

对于分页，您可以使用Array.prototype.slice() 限制显示的行数。只是为了给你一个想法，我发布了一个小例子。您可能需要更多地实现此逻辑才能处理您的代码。

示例

previousPage = () => {
  if (this.state.currentPage !== 1)
    this.setState((prevState) => ({currentPage: (prevState.currentPage - 1)}))
}

nextPage = () => {
  if (this.state.currentPage + 1 < this.state.githubData.lenght)
    this.setState((prevState) => ({currentPage: (prevState.currentPage + 1)}))
}

 render() {
   const { githubData, currentPage } = this.state
     return(
         <div className="container">
           <table key={name.id}>
             {githubData.slice((currentPage * 20), 20).map((name, index) => 
                <tr>   
                 <th><img src={name.owner.avatar_url}/></th>
                 <td>{name.owner.login}<div className="border-bottom"></div></td>
                 <td>{name.description}<div className="border-bottom"></div></td>
                 <td><a href={name.homepage}>{name.homepage}</a></td>
                </tr> 
             )}
           </table>
           <button onClick={this.previousPage}>Previous Page</button>
           <button onClick={this.nextPage}>Next Page</button>
         </div>
     )
 }

【讨论】：

【解决方案2】：

将您的状态设置为具有分页信息和数据。

比如

state = {
 pagination: {
  start: 0,
  rows: 20
 },
 githubData: ....
}

现在在您的渲染功能中，您可以根据分页信息进行拼接。每当点击新页面时，您都可以将状态设置为新的开始变量

【讨论】：