react遍历数据翻页

在React中，遍历翻页通常意味着需要处理一组数据的分页显示。可以通过维护当前页码和每页显示的项目数量来实现。

import React, { useState } from 'react';
 
const PaginateList = ({ items, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = useState(1);
 
  // 计算总页数
  const totalPages = Math.ceil(items.length / itemsPerPage);
 
  // 获取当前页的项目
  const currentItems = items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
 
  // 上一页
  const handlePrevious = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };
 
  // 下一页
  const handleNext = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };
 
  return (
    <>
      <button disabled={currentPage === 1} onClick={handlePrevious}>
        Previous
      </button>
      <button disabled={currentPage === totalPages} onClick={handleNext}>
        Next
      </button>
      <ul>
        {currentItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};
 
export default PaginateList;

使用此组件时，需要传入一个items数组和每页所需的itemsPerPage数量。组件内部维护当前页码currentPage，并在用户点击Previous或Next按钮时更新它。currentItems是当前页面显示的项目，而totalPages是根据总项目数和每页项目数计算得到的总页数。

请注意，上述代码没有处理边界情况，如当前页码小于1或大于总页数时的操作，实际应用中可能需要添加这样的检查。