React分页问题：切换分类时如何将页码重置为0

要解决切换分类时页码不重置导致的空白问题，只需在分类参数变化时自动将页码重置为0，具体修改如下：

步骤1：添加分类变化监听 #

在CategoryPage组件中新增一个useEffect，专门监听category参数的变化，一旦分类切换就将页码重置为0：

// 监听分类变化，重置页码为0
useEffect(() => {
  setPages(0);
}, [category]);

步骤2：利用原请求逻辑自动加载新数据 #

原有的useEffect依赖了pages状态，当页码被重置为0后，会自动触发重新请求，获取新分类的第一页数据：

useEffect(() => {
  getPostsByCategory(category, pages, size).then((data) => {
    setContent(data.content);
    setTotalPages(data.totalPages);
  });
}, [category, pages, size]);

完整修改后的组件代码示例 #

import { useParams, useEffect, useState } from 'react';
import Post from './Post';
import Pageination from './Pageination';

const CategoryPage = () => {
  const { category } = useParams();
  const [pages, setPages] = useState(0);
  const [size, setSize] = useState(10);
  const [content, setContent] = useState([]);
  const [totalPages, setTotalPages] = useState(0);

  // 监听分类变化，重置页码
  useEffect(() => {
    setPages(0);
  }, [category]);

  // 根据分类和页码加载数据
  useEffect(() => {
    getPostsByCategory(category, pages, size).then((data) => {
      setContent(data.content);
      setTotalPages(data.totalPages);
    });
  }, [category, pages, size]);

  console.log(totalPages);

  return (
    <div className="h-[80vh] flex flex-col space-y-4 items-center justify-between">
      <div>
        {content.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
      <Pageination pages={pages} setPages={setPages} totalPages={totalPages} />
    </div>
  );
};

export default CategoryPage;

原理说明 #

• 当用户切换分类时，useParams返回的category值发生变化，触发第一个useEffect将pages重置为0。
• pages状态更新后，触发第二个useEffect，使用page=0请求新分类下的文章数据，确保加载的是新分类的第一页内容，避免因原页码超出新分类总页数导致的空白。

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