如何在 ReactJS 中对 JSON 数据进行切片？

Question

我制作了 2 个组件 1)Content.js 2)Pagination.js 我想在用户单击分页组件时显示内容。每页共有 16 个对象。我在第 1 页使用了 .slice(0,16) 方法。现在我想根据页码更改切片函数中传递的参数，例如：
.slice(0,16) --> 第 1 页 .slice(17,33) ---> 第 2 页 依此类推，直到第 5 页，每页应显示 16 个对象，共 5 页。

内容.js：

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

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

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res.slice(0,16),     <----Parameters inside it must be changed for each page
        loading:false
      });
    })
    }

  viewstats(matchid){
    this.setState({
        callmatchinfo: true,
        matchid: matchid
    });
  }

  rendermatchinfo(){
    return <Matchinfo matchid={this.state.matchid} />
  }

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

    render() {

        if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
        }
        else if(this.state.callmatchinfo){
        return <Matchinfo match_id={this.state.matchid} />
        }

    return (
      <div>
          <div className="row">
            {this.renderMatches()}
              </div>
          <div className="row">
            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          </div>
      </div>
    );
  }
}

export default Content;

分页.js：

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

class Pagination extends Component {

  render() {
    return (
      <div>
          <div className="container">                 
              <ul className="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;

为了更清楚，请参见第 1 页的屏幕截图。此功能必须扩展为 5 页。

Answer 1

导入Pagination 组件并附加如下事件：

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

class Pagination extends Component {

  render() {
    return (
      <div>
          <div className="container">                 
              <ul className="pagination">
                <li onClick={this.props.onPageNext.bind(this, 1)} ><a href="#">1</a></li>
            <li onClick={this.props.onPageNext.bind(this, 2)} ><a href="#">2</a></li>
 <li onClick={this.props.onPageNext.bind(this, 3)} ><a href="#">3</a></li>
              </ul>
          </div>

      </div>
    );
  }
}

导出默认分页；

在 Content.js 中：

...

return (
      <div>
          <div className="row">
            {this.renderMatches()}
              </div>
          <div className="row">
            {this.state.callmatchinfo ? this.rendermatchinfo() : ''}
          </div>
            <Pagination onPageNext={this.onPageNext} /> 

      </div>
    );

...

  onPageNext(nextPage) {
    // logic to set the setState method for pagination...
  }