Seitenumbruch mit Reagieren

Question

Meine Seitenumbruch macht etwas seltsam. Ich benutze react-pager.

Wenn ich auf die erste Seite klicke - ich habe keine Gegenstände (aber ich habe sie beachtet), wenn ich auf die zweite Seite klicke, habe ich 4 Gegenstände und wenn ich auf die dritte Seite klicke, werden meine Gegenstände hinzugefügt von der zweiten Seite. Ich meine auf der dritten Seite habe ich 8 Artikel alt + neu, nicht 4 neue Artikel wie ich beachte. Ich denke etwas falsch in Scheibe.

Komponente ist unten:

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import Pager from 'react-pager'; 

class AlbumsShow extends Component { 
    constructor(props) { 
     super(props); 
     this.renderImage = this.renderImage.bind(this); 
     this.handlePageChanged = this.handlePageChanged.bind(this); 

     this.state = { 
      total:  3, 
      current:  1, 
      visiblePage: 2, 
     }; 
    } 

    handlePageChanged(newPage) { 
     this.setState({ current : newPage }); 
    } 

    renderImage() { 
     return this.props.images.slice((this.state.current-1), this.state.current * 4).map(image => (
      <li key={image.id}> 
       <img className="album_img" alt="job" src={image.img} /> 
       <p className="album_title">Test</p> 
      </li> 
     )); 
    } 

    render() { 
     return (
      <div> 
       <div> 
        {this.renderImage()} 
       </div> 
        <Pager 
         total={this.state.total} 
         current={this.state.current} 
         visiblePages={this.state.visiblePage} 
         titles={{ first: '<|', last: '>|' }} 
         className="pagination-sm pull-right" 
         onPageChanged={this.handlePageChanged} 
        /> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 
    const currentAlbumId = parseInt(ownProps.params.id, 10); 

    return { 
     images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images, 
    }; 
} 
export default connect(mapStateToProps)(AlbumsShow); 

Auch wenn ich meine Paginierung mehr 10 Stück haben sollte sichtbar sein, und wenn weniger als 10 - null, aber mein Zustand ist nicht zu arbeiten. Zum Beispiel:

  {this.renderImage() > 10 ? 

      <Pager 
       total={this.state.total} 
       current={this.state.current} 
       visiblePages={this.state.visiblePage} 
       titles={{ first: '<|', last: '>|' }} 
       className="pagination-sm pull-right" 
       onPageChanged={this.handlePageChanged} 
      />: null } 

Answer 1

Ich denke, this.state.current ist die Seitenzahl. So Ihre Scheibe kann so etwas wie dieses:

slice(this.state.current * 4, (this.state.current + 1) * 4 - 1)

EDIT: Ich habe nicht Ihre zweite Frage sehen. Wenn Sie nicht Ihre Paginierung wollen, wenn mehr als 10 Stück können Sie tun:

{this.props.images.length > 10 ? 

     <Pager 
      total={this.state.total} 
      current={this.state.current} 
      visiblePages={this.state.visiblePage} 
      titles={{ first: '<|', last: '>|' }} 
      className="pagination-sm pull-right" 
      onPageChanged={this.handlePageChanged} 
     />: null } 

EDIT 2: Hoppla, Strom beginnt bei 0 nicht 1. ich die Scheibe oben bearbeitet.

EDIT: 3: Wenn Sie alle Bilder anzuzeigen, wenn Sie weniger als 10 Stück haben Sie etwas tun können:

renderImage() { 
    const imgs = this.props.images.length > 10 ? 
     this.props.images.slice(this.state.current * 4, (this.state.current + 1) * 4 - 1) : 
     this.props.images; 
    return imgs.map(image => (
     <li key={image.id}> 
     <img className="album_img" alt="job" src={image.img} /> 
     <p className="album_title">Test</p> 
     </li> 
    )); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
     {this.renderImage()} 
     </ul> 

     {this.props.images.length > 10 ? 

     <Pager 
      total={this.state.total} 
      current={this.state.current} 
      visiblePages={this.state.visiblePage} 
      titles={{ first: '<|', last: '>|' }} 
      className="pagination-sm pull-right" 
      onPageChanged={this.handlePageChanged} 
     /> : null 
     } 
     </div> 
    ); 
    } 

Answer 2

Eine weitere Komponente Paging Handhabung ist react-pagination-custom.

Es können Sie benutzerdefinierte alles (Zahlentasten, Wrap-Container, Verbreitung, ..). Sein Dokument ist gut, Demo ist auch klar.