React.js 中的分页问题

Question

我已经创建了 Pagination 组件，但是在将它实现到我的 Characters 组件时遇到了问题。 我得到了上一个和下一个按钮，但我得到的是 NaN 而不是页码。 请指教我的错误在哪里？ 分页道具有问题吗？

分页.js

import React, { useState } from "react";

export const Pagination = ({
  data,
  RenderComponent,
  title,
  pageLimit,
  dataLimit,
}) => {
  const [pages] = useState(Math.round(data.length / dataLimit));
  const [currentPage, setCurrentPage] = useState(1);

  function goToNextPage() {
    setCurrentPage((page) => page + 1);
  }
  function goToPreviousPage() {
    setCurrentPage((page) => page - 1);
  }
  const changePage = (event) => {
    console.log(event.target);
    const pageNumber = Number(event.target.textContent);
    setCurrentPage(pageNumber);
  };

  const getPaginatedData = () => {
    const startIndex = currentPage * dataLimit - dataLimit;
    const endIndex = startIndex + dataLimit;
    return data.slice(startIndex, endIndex);
  };

  const getPaginationGroup = () => {
    let start = Math.floor((currentPage - 1) / pageLimit) * pageLimit;
    return new Array(pageLimit).fill().map((_, idx) => start + idx + 1);
  };
  return (
    <div>
      <h1>{title}</h1>

      <div>
        {getPaginatedData().map((d, idx) => (
          <RenderComponent key={idx} data={d} />
        ))}
      </div>

      <div className="pagination">
        <button
          onClick={goToPreviousPage}
          className={`prev ${currentPage === 1 ? "disabled" : ""}`}
        >
          prev
        </button>

        {/* show page numbers */}
        {getPaginationGroup().map((item, index) => (
          <button
            key={index}
            onClick={changePage}
            className={`paginationItem ${
              currentPage === item ? "active" : null
            }`}
          >
            <span>{item}</span>
          </button>
        ))}

        {/* next button */}
        <button
          onClick={goToNextPage}
          className={`next ${currentPage === pages ? "disabled" : ""}`}
        >
          next
        </button>
      </div>
    </div>
  );
};

我要实现分页组件的文件。

Characters.js

import { useState, useEffect } from "react";

import { CHARACTERS_PAGE_URL } from "../../api/rickNMortyApi";
import { Loading } from "../../components/Loading/Loading";
import { Character } from "./Character";
import { Pagination } from "../Pagination/Pagination";
export const Characters = () => {
  const [characters, setCharacters] = useState();
  useEffect(() => {
    try {
      fetch(CHARACTERS_PAGE_URL)
        .then((res) => res.json())
        .then(({ results }) => {
          if (results && Array.isArray(results)) {
            setCharacters(results);
          }
        })
        .catch((err) => console.log(err));
    } catch (e) {
      console.log(e);
    }
  }, []);

  if (!characters) {
    return <Loading />;
  }

  return (
    <div className="p-4 font-mono text-green-500 ">
      <div className="flex flex-row">
        <div className="m-4 ">
          <label>Species</label>
          <select name="species" id="species">
            <option value="all">all</option>
            <option value="human">human</option>
            <option value="alien">alien</option>
          </select>
        </div>
        <div className="m-4">
          <label>Status</label>
          <select name="status" id="status">
            <option value="all">all</option>
            <option value="alive">alive</option>
            <option value="dead">dead</option>
            <option value="unknown">unknown</option>
          </select>
        </div>
        <div className="m-4">
          <label>Gender</label>
          <select name="gender" id="gender">
            <option value="all">all</option>
            <option value="female">female</option>
            <option value="male">male</option>
            <option value="genderless">genderless</option>
            <option value="unknown">unknown</option>
          </select>
        </div>
      </div>
      <h1 className="text-4xl">Characters</h1>
      <Pagination data={characters} />
      <div className="grid grid-flow-col grid-cols-5 grid-rows-4 gap-4">
        {characters.map((character) => (
          <div key={character.id}>
            <Character character={character} />
          </div>
        ))}
      </div>
    </div>
  );
};

Answer 1

我添加了 现在我可以看到 prev, 1, 2, 3, 4,5, next 但是如果我点击页码，字符不会改变

当我尝试添加 dataLimit={20} 作为分页的道具时，我在下面看到一个箭头： 警告：React.jsx：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。