React中如何结合pageToken实现YouTube API按钮点击分页加载？

错误原因明确 #

你之前的问题出在给onClick传了函数执行结果（比如onClick={fetchVideos(nextPageToken)}）——这种写法会让组件渲染时就立刻调用fetchVideos，返回的是Promise对象，而非函数引用，所以触发了那个警告。正确的做法是给onClick传一个函数，让它在点击时才执行。

正确实现步骤 #

1. 管理分页相关状态 #

用useState维护必要的状态，包括视频数据、分页token和加载状态：

import { useState, useEffect } from 'react';

function YouTubeVideoList() {
  const [videos, setVideos] = useState([]);
  const [nextPageToken, setNextPageToken] = useState(null);
  const [prevPageToken, setPrevPageToken] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  // 替换成你的API密钥和目标频道ID
  const API_KEY = '你的YouTube API密钥';
  const CHANNEL_ID = '目标频道ID';

2. 封装通用的视频获取函数 #

写一个可复用的fetchVideos函数，接收pageToken参数，调用API后更新状态：

const fetchVideos = async (pageToken = null) => {
    setIsLoading(true);
    try {
      // 拼接API请求URL，根据pageToken决定是否添加分页参数
      const url = `https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet&maxResults=10${pageToken ? `&pageToken=${pageToken}` : ''}`;
      const response = await fetch(url);
      const data = await response.json();

      // 两种更新数据的方式二选一：
      // 1. 替换当前页数据（适合分页切换）
      setVideos(data.items);
      // 2. 追加新数据（适合加载更多）
      // setVideos(prev => [...prev, ...data.items]);

      // 更新分页token
      setNextPageToken(data.nextPageToken);
      setPrevPageToken(data.prevPageToken);
    } catch (error) {
      console.error('加载视频失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

3. 初始加载第一页数据 #

用useEffect在组件挂载时调用fetchVideos，不传pageToken默认获取第一页：

useEffect(() => {
    fetchVideos();
  }, []); // 空依赖数组确保只执行一次

4. 分页按钮的点击处理 #

给按钮绑定正确的点击事件，用箭头函数包裹fetchVideos调用，同时根据pageToken是否存在禁用按钮：

return (
    <div>
      <div className="video-list">
        {videos.map(video => (
          <div key={video.id.videoId} className="video-item">
            <h3>{video.snippet.title}</h3>
            <img src={video.snippet.thumbnails.medium.url} alt={video.snippet.title} />
          </div>
        ))}
      </div>

      <div className="pagination-buttons">
        <button 
          onClick={() => fetchVideos(prevPageToken)} 
          disabled={!prevPageToken || isLoading}
        >
          {isLoading ? '加载中...' : '上一页'}
        </button>
        <button 
          onClick={() => fetchVideos(nextPageToken)} 
          disabled={!nextPageToken || isLoading}
        >
          {isLoading ? '加载中...' : '下一页'}
        </button>
      </div>
    </div>
  );
}

export default YouTubeVideoList;

关键注意点 #

• 避免直接执行函数：onClick={() => fetchVideos(xxx)}才是正确写法，不要写成onClick={fetchVideos(xxx)}，后者会在渲染时立即执行。
• 加载状态控制：添加isLoading状态，点击按钮后禁用，防止重复请求。
• API权限检查：确保你的YouTube API密钥已启用YouTube Data API v3，且配额足够。

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