我应该如何编写 Pagination 组件 React JS？

Question

我正在构建一个 web 应用程序，而且我也是 web-dev 的新手。我的后端响应为 json，其中包含分页，如下所示：

{
    "count": 16,
    "next": "http://localhost:8000/en/api/events/?page=3",
    "previous": "http://localhost:8000/en/api/events/",
    "results": [
        {
            "url": "",
            "id": ,
            "title": "",
            "creation_date": "",
            "description": "",
            "event_date": "",
            "link": ""
        },
        ...
    ],
    "total_pages": 4
}

我想为我的 EventList.jsx 组件添加分页：

import React, { useState, useEffect } from "react";
import { Link, NavLink } from "react-router-dom";
import "./Content.css";
import "./Pagination";

import { useLanguage } from "../../context/LanguageTranslator";
import { getLanguage } from "../../utils/getLanguage";
import Pagination from "./Pagination";

const initialState = {
  fullAPI: {
    count: 0,
    next: null,
    previous: null,
    results: [],
    total_pages: 0,
  },
};


const EventList = (props) => {
  const { language } = useLanguage();
  const currentLanguage = getLanguage(language);

  const [state, setState] = useState(initialState);
  const [loading, setLoading] = useState(false);

  useEffect(async () => {
    try {
      setLoading(true);
      const langUrl = currentLanguage.urlName;
      const page = props.match.params.page;
      const defaultUrl = `http://localhost:8000/${langUrl}/api/events/?page=${page}`;
      // * url which we will fetch
      let currentUrl;

      currentUrl = defaultUrl;

      const res = await fetch(currentUrl);
      const fullAPI = await res.json();

      setState((prevState) => ({ ...prevState, fullAPI }));
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  }, []);

  const renderEvents = () => {
    const eventsList = state.fullAPI.results;

    return eventsList.map((item) => (
      <li key={item.id}>
        <p>
          {currentLanguage.title}:{item.title}
        </p>
        <p>
          <a href={item.link} className="aa">
            {currentLanguage.organizers}
          </a>
        </p>
        <Link to={`/events/id=${item.id}`} className="aa">
          {currentLanguage.linkToEvent}
        </Link>
      </li>
    ));
  };

  return (
    <main>
      <div>
        <ul>{renderEvents()}</ul>
        <Pagination
          totalPages={state.fullAPI.total_pages}
          next={state.fullAPI.next}
          previous={state.fullAPI.previous}
          currentPage={props.page}
        />
      </div>
    </main>
  );
};

export default EventList;

基本上现在我有了这个 Pagination.jsx：

import React, { useState, useEffect } from "react";
import { Link, NavLink, Redirect, useHistory } from "react-router-dom";
import "./Content.css";
import "./pagination.css";

const Pagination = (props) => {
  // * pagination

  const pages = [];
  for (let i = 1; i <= props.totalPages; ++i) {
    pages.push(i);
  }

  const handleClick = (number) => {
    return `/events/page=${number}`;
  };

  const renderPageNumbers = pages.map((number) => {
    return (
      <li
        key={number}
        id={number}
        onClick={() => {
          window.location.href = handleClick(number);
        }}
      >
        {number}
      </li>
    );
  });

  return (
    <div>
      {props.currentPage}
      <ul className="pageNumbers">{renderPageNumbers}</ul>
    </div>
  );
};

export default Pagination;

A 这样编码是因为我需要重新加载页面才能从服务器获取响应。所以现在我重新加载页面并且无法在分页组件内存储状态并且不能做这样的事情： [第一个] [上一个] 1 [2] ... 9 10 [下一个] [最后一个]

只有这个： 1 2 3 4 5 6 7 8 9 10

Answer 1

您不应仅在页面加载时从服务器获取响应。您最初可以在页面加载时获取，但从服务器加载应该是在一个单独的函数中，both 从useEffect 中调用，以及当用户想要转到下一页或上一页时。

至于 [first] [prev] 类型的东西，您需要为此添加单独的元素。您当前正在为每个页面创建一个数组，而您可能只想为[first]、[prev]、[n-2] 到[n+2]、[next] 和[last] 提供单独的元素。我注意到您的回复有next 和previous 链接，但是，如果可能，您最好只发送当前页面，然后自己获取上一个或下一个页码（因为您已经知道要命中的端点） .

无论如何，我已尽力而为，您似乎没有提出具体的问题，所以我试图回答您遇到的问题。