在reactjs中对映射记录进行分页

Question

我有以下，

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Pagination from "rc-pagination";
import Moment from "react-moment";
import swal from "sweetalert";
import axios from "axios";

import "rc-pagination/assets/index.css";
import AuthService from "../Auth/AuthService";
const Auth = new AuthService();

class JournalIndex extends Component {
  constructor() {
    super();
    this.state = {
      journals: []
    };
  }

  componentDidMount() {
    axios
      .get("/api/journals")
      .then(res => {
        this.setState({ journals: res.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  delete(id) {
    let config = {
      headers: { Authorization: "bearer " + Auth.getToken() }
    };

    swal({
      title: "Are you sure?",
      text: "Once deleted, you will not be able to recover this journal!",
      icon: "warning",
      buttons: true,
      dangerMode: true
    }).then(willDelete => {
      if (willDelete) {
        axios.delete("/api/journals/" + id, config).then(result => {
          this.props.history.push("/journals");
        });
        swal("Poof! Your journal has been deleted!", {
          icon: "success"
        });
      } else {
        swal("Your journal is safe!");
      }
    });
  }

  render() {
    return (
      <>
        <div className='p-12 text-gray-800'>
          <section className='text-center mb-12'>
            <h1 className='title'>Journals</h1>
            <p className='text-sm'>
              Here you'll find my journals, writings about everything from
              watches, repairs to dealing
            </p>
          </section>

          <section className='max-w-3xl m-auto'>
            {this.state.journals.map(journal => (
              <article className='pb-4' key={journal._id}>
                <Link
                  className='title dynamic-title'
                  to={`/journals/${journal._id}`}
                >
                  {journal.title}
                </Link>

                <div className='text-sm mt-2 mb-4'>
                  <Moment
                    format='Do MMMM YYYY'
                    date={new Date(journal.createdAt)}
                  />
                </div>

                {Auth.loggedIn() && (
                  <div className='mt-8 mx-auto text-center w-full'>
                    <hr />
                    <div className='my-4'>
                      <Link
                        to={`/dashboard/journals/${journal._id}/edit`}
                        className='btn btn-edit'
                      >
                        Edit
                      </Link>
                      <span className='text-gray-200 mx-4'>|</span>
                      <button
                        onClick={this.delete.bind(this, journal._id)}
                        className='btn btn-delete'
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                )}
                <hr />
              </article>
            ))}

            <Pagination
              showTotal={range => `${this.state.journals.length} items`}
              total={`${this.state.journals.length}`}
            />
          </section>
        </div>
      </>
    );
  }
}

export default JournalIndex;

我正在使用 rc-pagination 包，但我希望对映射数组中的所有记录进行分页，因此每页仅显示 10 个项目。

我查看了文档，但不太确定如何实施。

或者，如果有人可以将我指向一个分页包并提供一个很好的示例，我希望在几页上进行分页。

任何帮助都会很棒。

Answer 1

rc-pagination 有一个 defaultPageSize 属性，您可以将其定义为 10 或任何您想要的页面大小。