React电影应用分页功能异常：每页数据重复问题求助

问题根源 #

1. 分页组件事件处理错误：MUI的Pagination组件onChange回调的第二个参数才是选中的页码，你当前通过e.target.textContent获取页码的方式不可靠（比如遇到省略号按钮时会获取错误内容），且传递给setPage的是字符串类型，导致API请求时页码参数不符合要求。
2. 总页数设置错误：你默认设置numOfPages = 10，但实际总数据100条、每页50条的情况下，总页数应为2，错误的总页数会导致分页组件显示多余页码，且切换时逻辑混乱。

修正方案 #

1. 修复分页组件的事件处理（Pagination.js）

将Pagination的onChange改为接收官方提供的页码参数，确保传递给setPage的是数字类型：

const AppPagination = ({ setPage, numOfPages = 2 }) => {
  const handlePageChange = (page) => {
    setPage(page);
    window.scroll(0, 0);
  };
  return (
    <div className="page_container">
      <div className="root">
        <ThemeProvider theme={darkTheme}>
          <Pagination
            variant="outlined"
            color="primary"
            count={numOfPages}
            onChange={(_, page) => handlePageChange(page)}
          />
        </ThemeProvider>
      </div>
    </div>
  );
};

export default AppPagination;

2. 传递正确的总页数（Trending.js）

在调用AppPagination时传入实际的总页数（总数据100条 ÷ 每页50条 = 2页）：

// ... 其他代码保持不变
<AppPagination setPage={setPage} numOfPages={2} />
// ...

3. 确保API请求的页码参数正确

修正分页组件后，page会保持数字类型，API请求的?page=${page}会正确传递数字参数，确保返回对应页码的数据。

验证步骤 #

1. 切换页码时，查看控制台的API请求URL，确认page参数正确变化（1→2）。
2. 检查返回的data.items，确认两页数据不同（前50条和后50条）。

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