Question

获取数据

我有我需要显示的所有数据，但我想拼接它，这样我每页只能获得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标记应位于地图之外。

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

Answer 2

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

，例如

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

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

如何用React创建分页

2 个答案: