javascript - 如何使用 React 创建分页

Question

我从 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;  

Answer 1

首先，您的map 函数逻辑错误。您正在为每条记录创建一个表，您应该只为每条记录创建一行。 table 标签应该在 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>
     )
 }

对于分页，您可以使用 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>
     )
 }