React-paginate库---- onPageChange（）无法正常工作

Question

“ pact-paginate” npm库上的

onPageChange props（function）无法正常运行。 请指出正确的方向，为什么这样做。

我的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来调用api，并根据页码相应地显示数据。 请建议该怎么做？ 预先感谢。