分页组件 React JS 应该怎么写？

Question

我正在构建一个网络应用程序，我也是网络开发和所有方面的新手。我的后端响应为 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 链接，但是，如果可能的话，您最好只发送当前页面，然后自己获取上一页或下一页页码（因为您已经知道要命中的终点）。

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

分页组件 React JS 应该怎么写？

How should I write Pagination component React JS?

javascript

pagination

reactjs

react-native