Javascript 如何使用React创建分页

我从你那里得到数据

我有所有需要显示的数据，但我想拼接它，这样每页只能得到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;  

import React，{Component}来自'React'；
从“axios”导入axios；
类API请求扩展组件{
构造函数（）{
超级（）；
此.state={
githubData:[]，
};
} 
componentDidMount（）{
axios.get（）https://api.github.com/search/repositories?q=language:javascript&sort=stars&order=desc&per_page=100')
。然后（res=>{
console.log（'res'，res）
this.setState（{githubData:res.data.items}）
})
}
render（）{
const{githubData}=this.state
返回(
{githubData.map（（名称、索引）=>
{name.owner.login}
{name.description}
)}
)
}
}
导出默认请求；

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

比如

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

---

现在在渲染函数中，可以根据分页信息进行拼接。无论何时单击“新建页面”，您都可以将状态设置为“新建开始变量”

首先，您的

map

函数具有错误的逻辑。您正在为每条记录创建一个表，并且应该只为每条记录创建一行<代码>表格标记应位于地图之外

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

render（）{
const{githubData}=this.state
返回(
{githubData.map（（名称、索引）=>
{name.owner.login}
{name.description}
)}
)
}

对于分页，您可以通过使用限制显示的行数。为了给你一个想法，我发布了一个小例子。您可能需要实现更多的逻辑才能在代码上工作

示例

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

previousPage=（）=>{
如果（this.state.currentPage！==1）
this.setState（（prevState）=>（{currentPage:（prevState.currentPage-1）}））
}
下一页=（）=>{
if（this.state.currentPage+1（{currentPage:（prevState.currentPage+1）}））
}
render（）{
const{githubData，currentPage}=this.state
返回(
{githubData.slice（（当前页*20），20）.map（（名称，索引）=>
{name.owner.login}
{name.description}
)}
上一页
下一页
)
}

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