基于Semantic UI的React应用分页失效问题求助

一、分页点击无反应的问题排查与修复 #

分页功能失效主要源于三个问题：

1. 异步状态更新导致旧值引用：onChange函数中拼接apiUrl时，使用的是activePage的旧值（setActivePage是异步操作，状态不会立即更新）。
2. 数据请求未监听分页参数变化：useEffect依赖项为空数组，仅在组件挂载时请求一次数据，分页切换时不会重新获取对应页内容。
3. 分页参数未传递给请求方法：当前newsService.getNews()未使用apiUrl状态，无法根据分页参数获取对应数据。

修复步骤： #

1. 修改onChange函数，直接使用pageInfo.activePage拼接分页URL：

const onChange = (pageInfo: any) => {
  const newPage = pageInfo.activePage;
  setActivePage(newPage);
  setApiUrl(`http://localhost:3001/api/?page=${newPage}`);
};

2. 更新useEffect，添加apiUrl作为依赖项，确保URL变化时重新请求数据：

useEffect(() => {
  const fetchNews = async () => {
    // 确保newsService.getNews支持传入自定义URL，若原方法固定URL需调整service实现
    const fetchedNews = await newsService.getNews(apiUrl);
    setNews(fetchedNews);
  };

  fetchNews();
}, [apiUrl]);

3. 调整newsService.getNews方法以支持动态URL（示例）：

// news.service.ts示例修改
export const newsService = {
  async getNews(url: string = 'http://localhost:3001/api/') {
    const response = await fetch(url);
    return response.json();
  }
};

二、首页特殊布局实现 #

根据activePage值控制布局：页码为1时显示首条特殊新闻+其余列表，其他页码仅显示当前页新闻列表。

修改MainPage的JSX部分： #

return (
  <div>
    {/* 仅首页显示特殊样式首条新闻，同时避免main为undefined报错 */}
    {activePage === 1 && main && <MainNews main={main} />}
    {/* 首页渲染除首条外的内容，其他页渲染当前页全部内容 */}
    <NewsList news={activePage === 1 ? rest : news} />
    <Pagination 
      activePage={activePage}
      onPageChange={onChange}
      totalPages={10}
      ellipsisItem={null}
    />
  </div>
);

同时添加空数组处理，避免解构报错：

const [main, ...rest] = news.length > 0 ? news : [undefined, ...[]];

完整修改后的MainPage代码 #

import { useEffect, useState } from "react";

import NewsList from "../components/news list/NewList";
import { NewsModel } from "../models/news.model";
import { newsService } from "../services/news.service";
import MainNews from "../components/main news/MainNews";
import { Pagination } from 'semantic-ui-react';

const MainPage = () => {
  const [news, setNews] = useState<NewsModel[]>([]);
  const [activePage, setActivePage] = useState(1);
  const [apiUrl, setApiUrl] = useState('http://localhost:3001/api/');

  useEffect(() => {
    const fetchNews = async () => {
      const fetchedNews = await newsService.getNews(apiUrl);
      setNews(fetchedNews);
    };

    fetchNews();
  }, [apiUrl]);

  // 处理新闻为空的情况，避免解构报错
  const [main, ...rest] = news.length > 0 ? news : [undefined, ...[]];

  const onChange = (pageInfo: any) => {
    const newPage = pageInfo.activePage;
    setActivePage(newPage);
    setApiUrl(`http://localhost:3001/api/?page=${newPage}`);
  };
  
  return (
    <div>
      {activePage === 1 && main && <MainNews main={main} />}
      <NewsList news={activePage === 1 ? rest : news} />
      <Pagination 
        activePage={activePage}
        onPageChange={onChange}
        totalPages={10}
        ellipsisItem={null}
      />
    </div>
  );
};

export default MainPage;

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