React Paginate Второй экземпляр на той же странице не отображается

Я использую paginate-paginate для разбивки на страницы, и у меня есть два экземпляра на одной странице. Один сверху и один внизу, при получении новой опоры только верхняя часть повторно отображается. Ниже приведен код, я проверил различные методы жизненного цикла на компоненте, если он получает новые реквизиты и вызывается метод визуализации, все, похоже, работает, но на странице только верхняя страница разбиения на страницы работает, если я нажимаю на страницу 2, второй экземпляр должен также изменяются на страницу 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>
        );
      }
    }

Ответы

Ответ 1

Вы должны использовать forcePage prop, чтобы синхронизировать обе страницы.

Итак, как только страница будет изменена, в обратном вызове onPageChange вы обновите состояние компонента-обертки (содержащего оба компонента разбиения на страницы) с обновленным номером страницы. Чтобы обе страницы постранично синхронизировались, вы должны установить forcePage равным номеру обертки selected номер страницы.

Я тестировал его локально с официальной демонстрацией плагина . Вот пример кода (сосредоточиться на методах 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')
);