我正在尝试通过react-js-pagination和axios和api进行分页

Question

我需要通过Product.js组件和Pagination.js组件链接，但我不知道如何

我尝试了一些方法，但是失败了

import React, { Component } from 'react';
import Axios from 'axios';
import StarRatingComponent from 'react-star-rating-component';
import Pagination from "react-js-pagination";

class Productlist extends Component {
  constructor() {
    super();
    this.state = {
      products: [],
      activePage: 1
    };
    this.handlePageChange = this._handlePageChange;
  }

  getProducts() {
    Axios.get('http://test-api.edfa3ly.io/product')
      .then((prod) => {
        this.setState({
          products: prod.data.slice(0, 20)
        });
      });
  }

  componentDidMount() {
    this.getProducts();
  }

  handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

  render() {
    const { products } = this.state;
    const productList = products.length ? (
      products.map(product => (
        <div className="product-container" key={product.id}>
          <div className="card product-card ">
            <img src={product.image} className="card-img-top" alt="..." />
            <div className="card-body">
              <h5 className="card-title">{product.name}</h5>
              <p className="card-text">{product.price} <span>{product.currency}</span></p>
              <p>{product.releaseDate}</p>
              <StarRatingComponent
                name="star"
                editing={false}
                renderStarIcon={() => <span>★</span>}
                starCount={5}
                value={product.rating}
                starColor="#ffb400"
                emptyStarColor="#dfdfdf"
              />
              <p>{product.color}</p>
            </div>
          </div>
        </div>
      ))
    ) : (
      <div />
    );
    return (
      <div className="row">{productList}
        <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={250}
          pageRangeDisplayed={5}
          onChange={e => this.handlePageChange(e)}
        />
      </div>
    );
  }
}

export default Productlist;

有帮助吗？