如何使用reactjs从数组对象进行分页答案

【问题标题】：How to make pagination from array object by use reactjs如何使用reactjs从数组对象进行分页
【发布时间】：2019-06-08 06:42:15
【问题描述】：

我在此链接中有一个数据，我想在每个页面中仅放置 10 个索引，并对其他数据进行分页要查看此数组，请访问 http://demo9197058.mockable.io/users

【问题讨论】：

标签： reactjs pagination

【解决方案1】：

import ReactPaginate from 'react-paginate';

...

<ReactPaginate
      previousLabel={'previous'}
      nextLabel={'next'}
      breakLabel={'...'}
      breakClassName={'break-me'}
      pageCount={this.state.pageCount}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={this.handlePageClick}
      containerClassName={'pagination'}
      subContainerClassName={'pages pagination'}
      activeClassName={'active'}
/>

【讨论】：

谢谢，但是如何为数组对象计算页数？

【解决方案2】：

要获得页数，您需要定义页面大小并将条目总数除以该数字。

例如，如果您的页面大小为 25，您可以通过执行以下操作来获取页面数：

const PAGE_SIZE = 25;
const pageCount = data.length / PAGE_SIZE;

this.setState({ pageCount })

所以你的完整代码应该是这样的

Import ReactPaginate from 'react-paginate'

class Paginate extends Component {
    constructor() {
        super()
        this.state = { pageCount: null;
    }

    const PAGE_SIZE = 25;
    const pageCount = data.length / PAGE_SIZE;

    this.setState({ pageCount })

    render() {
        return (
        // your code goes here

         <ReactPaginate
             previousLabel={'previous'}
             nextLabel={'next'}
             breakLabel={'...'}
             breakClassName={'break-me'}
             pageCount={this.state.pageCount}
             marginPagesDisplayed={2}
             pageRangeDisplayed={5}
             onPageChange={this.handlePageClick}
             containerClassName={'pagination'}
             subContainerClassName={'pages pagination'}
             activeClassName={'active'}
        />
    )
}

【讨论】：