Reactjs 服务器端分页未按预期工作

我正在开发一个MERN堆栈应用程序，在那里我试图实现服务器端分页.

请注意，我正在使用Reaction查询来管理服务器状态.

在根路径上，我显示了两个帖子.

When I click on the Next button, NEXT two blog posts should be displayed. However, this is not happening. I see the same two posts on page 2 as on page 1.

问题出在哪里？

我认为，要么是我的服务器端分页逻辑有问题，要么是Reaction查询有问题.我怀疑，当我单击Next按钮时，Reaction Query不是在获取博客文章；相反，它是从缓存中获取文章.(在这一点上，我可能错了).

以下是我的代码片段:

邮寄控制器s.js

const asyncHandler = require("express-async-handler");
const Post = require("../models/postModel");

const fetchAllPosts = asyncHandler(async (req, res) => {
  const { pageNumber } = req.body;
  const pageSize = 2;
  const postCount = await Post.countDocuments({});
  const pageCount = Math.ceil(postCount / pageSize);
  const posts = await Post.find({})
    .limit(2)
    .skip(pageSize * (pageNumber - 1));
  res.json({ posts, pageCount });
});

PostRoutes.js

const express = require("express");

const { fetchAllPosts, createPost } = require("../controllers/postControllers");

const router = express.Router();

router.get("/api/posts", fetchAllPosts);

module.exports = router;

Posts.js

import React, { useState } from "react";
import { useFetchAllPosts } from "../hooks/postsHooks";
import Spinner from "../sharedUi/Spinner";

const Posts = () => {
  const [pageNumber, setPageNumber] = useState(1);

  const { data, error, isLoading, isError } = useFetchAllPosts(pageNumber);

  const handlePrevious = () => {
    setPageNumber((prevPageNum) => prevPageNum - 1);
  };
  const handleNext = () => {
    setPageNumber((prevPageNum) => prevPageNum + 1);
  };
  return (
    <div>
      {isLoading ? (
        <Spinner />
      ) : isError ? (
        <p>{error.message}</p>
      ) : (
        data.posts.map((post) => (
          <p className="m-6" key={post.title}>
            {post.title}
          </p>
        ))
      )}
      <div>
        {isLoading ? (
          <Spinner />
        ) : isError ? (
          <p>{error.message}</p>
        ) : (
          <div className="flex justify-between m-6 w-60">
            <button
              disabled={pageNumber === 1}
              className="bg-blue-400 px-1 py-0.5 text-white rounded"
              onClick={handlePrevious}
            >
              Previous
            </button>
            <p>{data.pageCount && `Page ${pageNumber} of ${data.pageCount}`}</p>
            <button
              disabled={pageNumber === data.pageCount}
              className="bg-blue-400 px-1 py-0.5 text-white rounded"
              onClick={handleNext}
            >
              Next
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Posts;

PostHooks.js

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import axios from "axios";

export const useFetchAllPosts = (pageNumber) => {
  const response = useQuery(["posts"], async () => {
    const { data } = await axios.get("/api/posts", pageNumber);
    return data;
  });

  return response;
};