React Sayfalandırmak İkinci Örnek aynı sayfada görüntülenmiyor

Question

Sayfalandırma için tepki-paginate kullanıyorum ve aynı sayfada iki örneğim var. Biri üstte ve altta, yeni prop alındığında sadece bir tane yeniden işlenir. Kod aşağıda, yeni sahne alır ve render yöntemi çağrılırsa, bileşen üzerinde farklı yaşam döngüsü yöntemlerini kontrol ettim, hepsi çalışıyor gibi görünüyor, ancak sayfada sadece üst sayfaların tıklanması işe yaraıyorsa, sayfa 2'ye tıklarsam, ikinci örnek Ayrıca, seçilen sayfa için yeni bir değer aldığı için Sayfa 2'ye de geçilir. Düşüncesi olan var mı?

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

Her iki sayfanın da eşleşmesini sağlamak için forcePage desteğini kullanmanız gerekir.

Dolayısıyla, bir sayfa değiştirildikten sonra, onPageChange geri aramada, güncellenmiş sayfa numarasıyla birlikte bir sarmalayıcı bileşeninin durumunu (her iki sayfalandırma bileşenini de içeren) güncellersiniz. Her iki sayfalama da eşzamanlı olarak çalışabilmeniz için, sarıcı durumunun selected sayfa numarasına eşit olması için forcePage değerini ayarlamanız gerekir.

Yerel olarak plugin's official demo ile test ettim. Sen, cevabı güncellemek için kesinlikle doğru gittiğini olan

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