ReactPaginate 更新问题

Question

我正在 React 中创建分页（使用 NPM 'ReactPaginate'）。当我更改页面时，第一次更改页面显示接下来的 5 个项目，但第二次更改（单击下一页 button/number）仅显示一个项目。等等（& 甚至不显示最终项目）。是 Hooks 更新问题吗？怎么解决？提前致谢:)

import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';
import './style.css';

export default function App() {
  const arrayNums = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
  ];

  const [offset, setOffset] = useState(0);
  const [data, setData] = useState([]);
  const [perPage] = useState(5);
  const [pageCount, setPageCount] = useState(0);

  const getData = () => {
    const data = arrayNums;
    const slice = data.slice(offset, offset + perPage);
    const display = slice.map((i) => <p key={i}>{i}</p>);
    setData(display);
    setPageCount(Math.ceil(data.length / perPage));
  };

  const pgClick = (e) => {
    const selected = e.selected;
    setOffset(selected + (perPage - 1));
  };

  useEffect(() => {
    getData();
  }, [offset]);

  return (
    <div>
      {data}
      <ReactPaginate
        previousLabel={'prev'}
        nextLabel={'next'}
        breakLabel={'...'}
        breakClassName={'break-me'}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={pgClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
        activeClassName={'active'}
      />
    </div>
  );
}

Answer 1

只是将此作为答案写下来，似乎让您走上了正确的轨道

遵循 pgClick 逻辑...如果我点击第三页，就会发生这种情况。 3 + (5 - 1) = 7。因此您的偏移量将从 7 开始而不是 15（第 3 页 * 每页 5 项）。我将从那里开始

ReactPaginate 更新问题

ReactPaginate update issue

pagination

reactjs