基于Jikan API：点击分页按钮时如何更新API URL参数

你的问题核心在于服务器组件的初始page值硬编码，且客户端组件修改的page值无法触发服务器重新请求数据：

1. 服务器组件里current_page固定为1，每次渲染都会请求第一页数据，没有从外部（比如URL参数）获取当前页
2. 客户端组件里修改的current_page是props传递的副本，既无法修改原始值，也不会触发服务器组件重新渲染，自然不会更新API请求的page参数

修复步骤 #

1. 修改服务器组件（AnimeList）

让组件从URL的查询参数中获取当前页，默认值为1，这样URL变化时会自动重新请求对应页面的数据：

import NextPage from './../components/PaginationButtons';

export default async function AnimeList({ searchParams }) {
    // 从URL query获取page，默认1，转为数字类型
    const current_page = Number(searchParams?.page) || 1;
    const data = await fetch(`https://api.jikan.moe/v4/anime?page=${current_page}`);
    const anime = await data.json();

    const total_pages = anime.pagination.last_visible_page;

    return (
        <div>
            <div className="flex flex-col flex-wrap">
                <ul>
                    {anime.data.map(a => (
                        <li key={a.mal_id}>{a.title}</li>
                    ))}
                </ul>
            </div>
            
            <NextPage
                current_page={current_page}
                total_pages={total_pages}
            />  
        </div>
    )
}

2. 修改客户端组件（NextPage）

使用Next.js的路由工具修改URL的查询参数，触发服务器组件重新渲染，同时处理分页边界（不能小于1，不能超过总页数）：

"use client";
import { useRouter, useSearchParams } from 'next/navigation';

export default function NextPage({ current_page, total_pages }) {
    const router = useRouter();
    const searchParams = useSearchParams();

    const handlePageChange = (newPage) => {
        // 边界校验
        if (newPage < 1 || newPage > total_pages) return;
        
        const params = new URLSearchParams(searchParams);
        params.set('page', newPage);
        router.push(`/?${params.toString()}`);
    };

    return (
        <>
            <div className="join">
                <button 
                    className="join-item btn" 
                    onClick={() => handlePageChange(current_page - 1)}
                    disabled={current_page === 1}
                >
                    Previous Page
                </button>
                <p>{current_page} <span>of</span> {total_pages}</p>
                <button 
                    className="join-item btn" 
                    onClick={() => handlePageChange(current_page + 1)}
                    disabled={current_page === total_pages}
                >
                    Next Page
                </button>
            </div>
        </>
    )
}

关键说明 #

• 服务器组件通过searchParams获取URL中的page参数，每次URL变化时会重新执行fetch请求，获取对应页面的数据
• 客户端组件通过useRouter修改URL的query参数，触发服务器组件重新渲染，而不是直接修改props的值
• 添加了分页边界校验和按钮禁用状态，避免无效的分页请求
• 给列表项添加了key属性，符合React的渲染规范

内容的提问来源于stack exchange，提问作者S. Lowe