Библиотека React-paginate ---- onPageChange () не работает должным образом - PullRequest
Новая
       8

Библиотека React-paginate ---- onPageChange () не работает должным образом

0 голосов
/ 23 октября 2019

onPageChange реквизиты (функция) в библиотеке «pm-paginate »npm не работают должным образом. Пожалуйста, укажите мне правильное направление, почему это происходит.

My App.js: 

import React, { Component } from 'react';
import  './App.css';
import axios from 'axios';
import ReactPaginate from 'react-paginate';

class App extends Component {
  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: 1,
    selectedPage: 0
  }

  handlePageClicked = data => {
    console.log("data");
    // let selected = data.selected;
    // let offset = Math.ceil(selected * 10);
    // this.setState({
    //   selectedPage: selected
    // })
    // console.log(selected);
  };

  componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }


  makeHttpRequestWithPage = async pageNumber => {
    const response = await axios.get(`http://localhost:3040/api/paginate?pageNo=${pageNumber}`);
    this.setState({
      users:response.data.data,
      total:response.data.totalCount,
      per_page:response.data.perPageCount,
      current_page:response.data.pageNo
    });
  }


  render() {
    const { users, total, per_page, current_page } = this.state;
    let tableData;
    if(users){
      tableData = users.map(user => (
        <tr key={user._id}>
          <td>{user._id}</td>
          <td>{user.title}</td>
          <td>{user.likes}</td>
        </tr>
      ));
    }

    return(
      <div className="app">
          <h2>App</h2>
          <table className="table">
              <thead>
                <tr>
                  <th>S/N</th>
                  <th>Title</th>
                  <th>Likes</th>
                </tr>
              </thead>
              <tbody>
                {tableData}
              </tbody>
        </table>

        <div className="pagination">

          <ReactPaginate pageCount={10}
                    pageRangeDisplayed={5}
                    marginPagesDisplayed={2}
                    previousLabel="Prev"
                    nextLabel="Next"
                    breakLabel="..."
                    activeClassName="active"
                    breakClassName="ellipsis"
                    breakLinkClassName="anchorLink"
                    containerClassName={'pagination'}
                    onPageChange={this.handlePageClick}
                    />
        </div>

      </div>
    );
 }
}

export default App;

Даже консольное утверждение ничего не дает. Что я здесь делаю не так? Я хочу вызывать API на разных нажатиях кнопок и отображать данные в соответствии с номером страницы. Подскажите пожалуйста как это сделать? Заранее спасибо.

...