wie Paginierung zu schaffen, mit

Question

Reagieren ich Daten von github api

ich alle Daten i angezeigt werden müssen müssen, aber ich möchte es splice, so dass ich nur 20 Repositories pro Seite erhalten.

Und ich will kein Framework oder ein Plugin dafür.

Ich bin ziemlich neu zu reagieren und JS im Allgemeinen, so dass ich nicht weiß, wo ich anfangen oder was zu tun ist, um eine Seitennummerierung zu erstellen.

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

Zuerst hat Ihre map Funktion eine falsche Logik. Sie erstellen für jeden Datensatz eine Tabelle und Sie sollten nur eine Zeile für jeden Datensatz erstellen. table Tags sollten außerhalb der Karte sein.

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

Für Paginierung, was Sie tun können, ist die Anzahl der Zeilen, die Sie durch die Verwendung Array.prototype.slice() zeigen zu begrenzen. Nur um dir eine Idee zu geben, poste ich ein kleines Beispiel. Möglicherweise müssen Sie einige weitere implementieren, damit diese Logik Ihren Code bearbeiten kann.

Beispiel

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

Legen Sie fest, dass Ihr Status Paginierungsinformationen und -daten enthält.

wie

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

und jetzt in Ihnen Funktion machen können Sie auf der Grundlage der Paginierung info Spleiß. Immer wenn auf eine neue Seite geklickt wird, können Sie den Status auf eine neue Startvariable setzen