React Paginate Second Instancja na tej samej stronie nie renderuje się

Question

Używam stronicowania reagowania do stronicowania i mam dwie instancje na tej samej stronie. Jeden na górze i jeden na dole, gdy nowy rekwizyt otrzyma tylko górny, jest ponownie renderowany. Poniżej znajduje się kod, sprawdziłem różne metody cyklu życia na komponencie, jeśli otrzyma on nowe rekwizyty i wywoływana jest metoda renderowania, wszystko wydaje się działać, ale na stronie działa tylko górna paginacja, co oznacza, że ​​jeśli kliknę stronę 2, druga instancja powinna również zmienić na Strona 2, ponieważ otrzymała nową wartość dla wybranej strony. jakieś pomysły?

import React from 'react'; 
import ReactPaginate from 'react-paginate'; 

    export default class Pager extends React.Component { 
     constructor() { 
     super(); 
     } 

     render() { 

     return (
      <div className={`pager ${this.props.position}`}> 
      <ReactPaginate 
       previousLabel={'Prev'} 
       nextLabel = {'Next'} 
       breakLabel = {<a href="">...</a>} 
       breakClassName = {"break-me"} 
       pageCount = {this.props.totalPages} 
       marginPagesDisplayed ={1} 
       pageRangeDisplayed={2} 
       onPageChange = {this.props.onPageNumberClick} 
       containerClassName = {"page-links-container"} 
       pageLinkClassName = {"pg-links"} 
       activeClassName = {"active"} 
       previousClassName = {"prev-pg-lnk"} 
       nextClassName = {"next-pg-lnk"} 
       disabledClassName = {"disabled"} 
       initialPage = {parseInt(this.props.selectedPage) -1} 
       /> 
      </div> 
     ); 
     } 
    } 

Answer 1

Musisz użyć podpórki forcePage, aby zsynchronizować obie paginacje.

Po zmianie strony, w wywoływaniu onPageChange aktualizujesz stan komponentu opakowania (który zawiera oba komponenty paginacji) ze zaktualizowanym numerem strony. Aby obie strony działały zsynchronizowane - musisz ustawić wartość forcePage, aby była równa numerowi strony opakowania selected.

Testowałem to lokalnie przy pomocy plugin's official demo. Oto przykładowy kod (koncentrować się na render i handlePageClick metod):

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactPaginate from 'react-paginate'; 
import $ from 'jquery'; 

window.React = React; 


export class CommentList extends Component { 
    render() { 
    let commentNodes = this.props.data.map(function(comment, index) { 
     return (
     <div key={index}>{comment.comment}</div> 
    ); 
    }); 

    return (
     <div id="project-comments" className="commentList"> 
     <ul> 
      {commentNodes} 
     </ul> 
     </div> 
    ); 
    } 
}; 

export class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     data: [], 
     offset: 0, 
     selected: null 
    } 
    } 

    loadCommentsFromServer() { 
    $.ajax({ 
     url  : this.props.url, 
     data  : {limit: this.props.perPage, offset: this.state.offset}, 
     dataType : 'json', 
     type  : 'GET', 

     success: data => { 
     this.setState({data: data.comments, pageCount: Math.ceil(data.meta.total_count/data.meta.limit)}); 
     }, 

     error: (xhr, status, err) => { 
     console.error(this.props.url, status, err.toString()); 
     } 
    }); 
    } 

    componentDidMount() { 
    this.loadCommentsFromServer(); 
    } 

    handlePageClick = (data) => { 
    let selected = data.selected; 
    let offset = Math.ceil(selected * this.props.perPage); 

    this.setState({offset: offset, selected},() => { 
     this.loadCommentsFromServer(); 
    }); 
    }; 

    render() { 
    return (
     <div className="commentBox"> 
     <CommentList data={this.state.data} /> 
     <ReactPaginate previousLabel={"previous"} 
         nextLabel={"next"} 
         breakLabel={<a href="">...</a>} 
         breakClassName={"break-me"} 
         pageCount={this.state.pageCount} 
         marginPagesDisplayed={2} 
         pageRangeDisplayed={5} 
         onPageChange={this.handlePageClick} 
         containerClassName={"pagination"} 
         subContainerClassName={"pages pagination"} 
         activeClassName={"active"} 
         forcePage={this.state.selected} /> 

     <ReactPaginate previousLabel={"previous"} 
         nextLabel={"next"} 
         breakLabel={<a href="">...</a>} 
         breakClassName={"break-me"} 
         pageCount={this.state.pageCount} 
         marginPagesDisplayed={2} 
         pageRangeDisplayed={5} 
         onPageChange={this.handlePageClick} 
         containerClassName={"pagination"} 
         subContainerClassName={"pages pagination"} 
         activeClassName={"active"} 
         forcePage={this.state.selected} /> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(
    <App url={'http://localhost:3000/comments'} 
     author={'adele'} 
     perPage={10} />, 
    document.getElementById('react-paginate') 
);