点击“下一步”按钮时如何更新API URL中的参数

Question

我正在构建一个基于 Jikan API 的网站。我能够获取我需要的数据。然而，由于有数千个条目，它们位于分页后面，我可以很好地访问此信息。

我希望能够完成的是根据单击按钮来循环浏览页面来更新 API 参数。

我已经能够添加按钮的功能，并且它按预期工作，但是，API URL 不会更新，因此我只能访问结果的第一页。

我用于获取 API 的服务器组件如下：

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

export default async function AnimeList() {
    let current_page = 1
    let data = await fetch(`https://api.jikan.moe/v4/anime?page=${current_page}`)
    let anime = await data.json()

    const total_pages = anime.pagination.last_visible_page
    const page = anime.pagination.current_page



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

我的按钮客户端组件如下：

"use client"

export default function NextPage({ current_page, total_pages }) {
    
    return (
        <>
            <div className="join">
                <button className="join-item btn" onClick={() => current_page--}>Previous Page</button>
                <p>{current_page} <span>of</span> {total_pages}</p>
                <button className="join-item btn" onClick={() => current_page++}>Next Page</button>
            </div>
        </>
    )
}

Answer 1

API URL 永远不会更新，因为

current_page

的值永远不会改变。您尝试使用

onClick

组件中的

NextPage

处理函数来更改它，但您永远不应该直接修改传递给 React 组件的 prop。 React 做你想要的事情的方法是使用

useState

钩子并将一个函数传递给

NextPage

，这将更新父组件

AnimeList

中的值。以下是您可以做到的方法：

将

AnimeList

组件文件更改为：

"use client"

import NextPage from './../components/PaginationButtons';
import { useState } from 'react';

export default async function AnimeList() {
  const [current_page, set_current_page] = useState(1)
  let data = await fetch(`https://api.jikan.moe/v4/anime?page=${current_page}`)
  let anime = await data.json()

  const total_pages = anime.pagination.last_visible_page
  const page = anime.pagination.current_page

  return (
    <div>
      {/* ... */}
      <NextPage
        current_page={current_page}
        total_pages={total_pages}
        page={page}
        set_current_page={set_current_page}
      /> 
    </div>
  )
}

将

NextPage

组件文件更改为：

"use client"

export default function NextPage({ current_page, total_pages, set_current_page }) {    
    return (
        <>
            <div className="join">
                <button className="join-item btn" onClick={() => set_current_page(current_page--)}>Previous Page</button>
                <p>{current_page} <span>of</span> {total_pages}</p>
                <button className="join-item btn" onClick={() => set_current_page(current_page++)}>Next Page</button>
            </div>
        </>
    )
}

请注意，您现在必须在

"use client"

组件文件中包含

AnimeList

指令。如果

AnimeList

是服务器端渲染的，它将无法将

set_current_page

函数传递到

NextPage

客户端组件，因为该函数无法序列化。