2017-05-23 3 views
0

Ich muss Seitennummerierung für Liste der Elemente mit react-paginate erstellen. Meine Komponente ist unten:Paginierung mit React-Paginate

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link, browserHistory } from 'react-router'; 
import ReactPaginate from 'react-paginate'; 

class AlbumsShow extends Component { 

    getInitialState() { 
    return { 
     items: [] 
    } 
    } 
    onChangePage(page, album) { 
    return request("album/" + album.id, {page: page}).then(function(items) { 
     this.setState({items: items}); 
    }.bind(this)); 
    } 

    renderImage(){ 

     return this.props.images.map((image) => { 
      return(

       <li key={image.id}>     
         <img alt="job" src={image.img} /> 
       </li> 

      ); 
     }); 
    } 


    render(){ 

     return (

      <div> 
       <div className="albums"> 
        <div className="albums_caixa"> 
         <div className="row"> 
          <div className="col-md-12"> 
           <ul className="no_pad"> 
            {this.renderImage()} 
            <Paginator max={5} onChange={this.onChangePage}/> 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     ); 
    } 
} 


function mapStateToProps(state){ 

    return { 

     images: state.image 

    }; 
} 



export default connect(mapStateToProps)(AlbumsShow); 

Konsole zeigt mir 'request' Fehler nicht definiert ist Ich brauche den folgenden Routing-Pfad zu meinem Artikel:/Album /: id/page /: Seite.

Vielen Dank für Ihre Hilfe!

Antwort

0

Wie die Konsole zeigt, ist die Anforderungsmethode in onChangePage nicht definiert. Normalerweise müssen Sie in der onChangePage-Funktion einige Daten abrufen, die sich auf diese Seite beziehen. Sie könnten andere Methode wie fetch verwenden.