React分页实现每页数据保持升序排列的技术问询

要实现每页数据都维持全局升序，核心是先对完整数据集做一次全局排序，再基于排序后的数组进行分页截取，而非每次分页时局部排序。

你的代码问题分析 #

1. 排序逻辑与需求不符：你描述要按ID升序，但当前代码实际是按name字段排序；
2. 无缓存的重复排序：组件每次渲染都会重新生成排序后的数组，虽不影响功能，但会造成不必要的性能损耗；
3. HTML结构不规范：原代码中每个表格行都包裹在独立的<tbody>里，不符合表格的标准结构。

修正后的代码实现 #

以下是按ID升序的修正版本，若需按name排序，只需修改排序逻辑即可：

import Pagination from "@mui/material/Pagination";
import { useState, useMemo } from "react";

export default function App() {
  const employees = [
    { id: 2, name: "Bob", country: "Belgium" },
    { id: 3, name: "Carl", country: "Canada" },
    { id: 1, name: "Alice", country: "Austria" },
    { id: 2, name: "Mike", country: "USA" },
    { id: 3, name: "Sam", country: "India" },
    { id: 1, name: "jake", country: "Japan" }
  ];
  const [emp] = useState(employees);
  const rowsPerPage = 3;
  const [page, setPage] = useState(1);

  // 用useMemo缓存排序后的数组，仅在原始数据变化时重新排序
  const sortedEmployees = useMemo(() => {
    // 按ID升序排序
    return [...emp].sort((a, b) => a.id - b.id);
    // 若需按name大小写不敏感升序，替换为下面的代码：
    // return [...emp].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
  }, [emp]);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const startIndex = (page - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  // 从全局排序后的数组中截取当前页数据
  const displayedRows = sortedEmployees.slice(startIndex, endIndex);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {displayedRows.map((data, index) => (
            <tr key={index}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.country}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination
        count={Math.ceil(sortedEmployees.length / rowsPerPage)}
        color="primary"
        variant="outlined"
        page={page}
        onChange={handleChangePage}
      />
    </>
  );
}

关键修改点说明 #

• 全局排序+缓存：通过useMemo缓存排序后的数组，确保只在原始数据变化时重新排序，既保证顺序正确又提升性能；
• 基于排序数组分页：所有分页截取操作都基于全局排序后的sortedEmployees，每一页都是全局有序数据的连续片段；
• 修复表格结构：将所有行统一放在一个<tbody>中，符合HTML表格的规范；
• 灵活切换排序字段：如需按name排序，替换useMemo中的排序逻辑即可，用localeCompare实现大小写不敏感的字符串排序。

修改后，无论切换到哪一页，数据都会维持全局升序状态。

内容的提问来源于stack exchange，提问作者Sougata Mukherjee