MERN栈服务端分页失效：点击Next仍显示相同帖子求助

你的分页功能失效主要有三个核心问题，逐个修复即可解决：

1. 服务端GET请求错误获取参数 #

fetchAllPosts是GET接口，但你尝试从req.body读取pageNumber——GET请求的参数不会放在请求体里，应该从req.query获取。

修改postControllers.js：

const fetchAllPosts = asyncHandler(async (req, res) => {
  // 从req.query读取pageNumber，默认值设为1避免空值错误
  const pageNumber = parseInt(req.query.pageNumber) || 1;
  const pageSize = 2;
  const postCount = await Post.countDocuments({});
  const pageCount = Math.ceil(postCount / pageSize);
  const posts = await Post.find({})
    .limit(pageSize) // 用变量替代硬编码的2，更易维护
    .skip(pageSize * (pageNumber - 1));
  res.json({ posts, pageCount });
});

2. 前端Axios请求未正确传递分页参数 #

axios.get的第二个参数是配置对象，你直接传pageNumber不会生效，需要把参数放在params里。

修改postHooks.js的请求部分：

export const useFetchAllPosts = (pageNumber) => {
  const response = useQuery(["posts", pageNumber], async () => {
    // 用params传递pageNumber到服务端
    const { data } = await axios.get("/api/posts", { params: { pageNumber } });
    return data;
  });

  return response;
};

3. React Query缓存键未包含分页参数 #

原查询键是["posts"]，所有分页请求都会复用同一个缓存，导致切换页面时返回旧数据。必须把pageNumber加入查询键，让不同页面的请求拥有独立缓存。

上面的postHooks.js修改已经包含了这一点：useQuery(["posts", pageNumber], ...)，这样React Query会根据不同的pageNumber维护不同的缓存条目。

验证修复 #

完成以上修改后，点击Next按钮时：

• 前端会传递正确的pageNumber参数到服务端
• 服务端根据参数返回对应分页的数据
• React Query会缓存不同页面的数据，切换时自动命中对应缓存或发起新请求

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