React Paginate同じページの2番目のインスタンスが再レンダリングされません

Question

私はページ区切りに反応ページを使用していますが、同じページに2つのインスタンスがあります。トップに1つ、ボトムに1つ、新しいプロップが受信されるとトップの1つだけが再レンダリングされます。以下はコードですが、新しい小道具を受け取り、レンダリングメソッドが呼び出された場合、コンポーネントのライフサイクルメソッドを確認しました。すべてが動作しているようですが、ページ上のページングのみがページ2をクリックすれば意味があります。選択したページに新しい値を受け取ったため、Page 2にも変更されます。何かご意見は？

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

forcePage propを使用して両方のページを同期させる必要があります。

ページが変更されると、onPageChangeコールバックで、更新されたページ番号でラッパーコンポーネント（ページングコンポーネントを保持する）の状態を更新します。両方のページ設定を同期させるには、forcePageをラッパーの状態selected page numerと等しく設定する必要があります。

私はローカルでplugin's official demoでテストしました。ここでは例のコードは、（renderとhandlePageClick方法に焦点を当てる）である：

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') 
);