多组件中使用MUI PaginationItem时不同步的问题

你的问题根源在于多个分页组件没有共享统一的当前页码状态——默认情况下每个Pagination组件会维护自己的内部页码状态，所以切换时其他组件不会同步更新。

解决步骤：

• 用React的useState声明一个全局的当前页码状态，让所有分页组件共用
• 给每个Pagination组件添加page={currentPage}属性，强制用外部状态控制显示的页码
• 在handleChange函数里更新这个共享状态

修改后的完整代码示例：

import { useState } from 'react';
import { Stack, Pagination, PaginationItem } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

function YourComponent() {
  const [currentPage, setCurrentPage] = useState(1); // 共享的当前页码状态
  const count = 10; // 总页数，根据你的实际情况调整

  const handleChange = (event, value) => {
    setCurrentPage(value); // 更新共享状态
  };

  // 渲染多个分页组件，都绑定同一个currentPage和handleChange
  return (
    <div>
      {/* 第一个分页组件 */}
      <Stack>
        <Pagination
          count={count}
          page={currentPage} // 绑定当前页码
          renderItem={(item) => (
            <PaginationItem
              className="pagination"
              components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
              {...item}
            />
          )}
          onChange={handleChange}
        />
      </Stack>

      {/* 第二个重复的分页组件 */}
      <Stack style={{ marginTop: '20px' }}>
        <Pagination
          count={count}
          page={currentPage} // 同样绑定同一个currentPage
          renderItem={(item) => (
            <PaginationItem
              className="pagination"
              components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
              {...item}
            />
          )}
          onChange={handleChange}
        />
      </Stack>
    </div>
  );
}

export default YourComponent;

关键说明：

• 必须显式传入page属性，否则Pagination会使用内部状态，多个组件之间无法同步
• 所有分页组件的onChange都指向同一个更新状态的函数，确保任何一个组件切换页码时，全局状态更新，所有组件都会重新渲染到正确的页码

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