如何在 ReactJS 的前端实现分页？

Question

我使用 ReactJS、NodeJS、MongoDB 制作了板球网络应用程序。在前端，我每页显示来自 JSON 对象的数据，我想显示 16 个 JSON 对象。我正在使用.slice(0,16) 方法从返回 577 个对象的 REST API 中分割 JSON 对象。现在如何实现第 2、3、4、5 页的分页。

对于第 2 页 -> 切片 (17,33) 对于第 3 页 -> 切片（34,49） 等等……

以下是我的 webapp 的代码和屏幕截图：

在 content.js 中：

import React, { Component } from 'react';
import './content.css';

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),
        loading:false
      })
    })
    }

    renderMatches() {
        return this.state.matches.map(match => {
            return (
                <div class="col-lg-3">
                    <div id="content">
                        <p class="match">MATCH {match.id}</p>
                        <h4>{match.team1}</h4>
                        <p>VS</p>
                        <h4>{match.team2}</h4>
                        <div class="winner">
                            <h3>WINNER</h3>
                            <h4>{match.winner}</h4>
                        </div>
                        <div class="stats">
                            <button type="button" class="btn btn-success">View Stats</button>
                        </div>
                    </div>
                </div>
            );
        })
    }

    render() {

        if (this.state.loading) {
            return <div>>Loading...</div>
        }

    return (
      <div>
          <div class="row">
            {this.renderMatches()}
          </div>
      </div>
    );
  }
}

export default Content;

在 Pagination.js 中：

import React, { Component } from 'react';

class Pagination extends Component {

  render() {
    return (
      <div>
          <div class="container">
              <h2>Pagination</h2>
              <p>The .pagination class provides pagination links:</p>                  
              <ul class="pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

截图更清晰： enter image description here

Answer 1

如何根据page 查询字符串将所有匹配项存储在组件状态中并仅在渲染期间进行切片？

在componentDidMount()中，获取数据后，简单的设置所有匹配的状态：

  this.setState({
    matches: res,
  })

然后，假设您想在 url 中使用查询字符串来控制分页，例如：

?page=2

您可以在 render() 中过滤匹配项：

const RECORDS_PER_PAGE = 16;
const page = parseInt(getPageNumber(), 10) || 1; // defaults to 1 if no page query specified
const offset = (page - 1) * RECORDS_PER_PAGE

// do your mapping (do this in your renderMapping() method)
const matchComponents = this.state.matches.slice(0 + offset, RECORDS_PER_PAGE + offset).map(/* ... */);

其中getPageNumber() 是一种为您提供页面查询字符串值的方法：

// Use your own query string parser if you wish
getPageNumber() {
  return window.location.search // <-- gives you access to the query parameters
  .slice(1) // remove the `?`
  .split("&")
  .reduce((queryHash, queryParam) => {

    // e.g. ?page=3 becomes ["page", "3"]
    const query = queryParam.split('=');
    return Object.assign({}, queryHash, ({
      [query[0]]: query[1] || null
    }));

  }, {}).page;
}