使用React Hooks调用YouTube API获取播放列表 刷新不渲染及403报错问题

你代码里有两个核心问题共同导致了报错和403状态码：

• state类型不匹配，首次渲染时调用不存在的方法触发报错
• useEffect依赖配置错误导致无限循环请求，短时间大量调用触发YouTube接口限流，出现403报错

具体问题说明 #

1. 你初始化data时赋值的是对象{items:[]}，但调用setData时传入的是接口返回的results.data.items数组，首次渲染时data还是对象类型，对象本身没有map方法，直接调用就会报错。
2. useEffect的依赖数组填了data，每次请求完成修改data都会重新触发useEffect执行请求，形成无限循环，短时间大量请求会触发YouTube接口的限流规则，就是你看到的403报错。

解决方案 #

1. 修正核心逻辑代码 #

调整state类型、useEffect依赖，补充异常处理，修改后的完整代码如下：

import React, { useEffect, useState } from 'react'
import { Container, Row, Col, Card } from 'react-bootstrap'
import PageHeader from '../components/PageHeader'
import axios from "axios"

const Tutorials = () => {
  // 初始化直接给空数组，匹配后续接口返回的items类型
  const [data, setData] = useState([])
  // 补充loading和错误状态，提升体验
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const results = await axios(
          'https://youtube.googleapis.com/youtube/v3/playlists?part=snippet&channelId=[CHANNEL_ID]&key=[你的API_KEY]'
        );
        setData(results.data.items) 
      } catch (err) {
        setError(err)
        if (err.response?.status === 403) {
          console.error('YouTube API配额不足或密钥无效，请检查Google Cloud控制台配置')
        }
      } finally {
        setLoading(false)
      }
    }
    fetchData();
  }, []) // 空依赖数组，只在组件首次挂载时执行一次，避免无限请求

  if (loading) return <div>加载中...</div>
  if (error) return <div>加载失败，请稍后重试</div>

  return (
    <div className="">
      <Container>
        <PageHeader title="Tutorials" />
        <Row xs={1} md={2} className="g-4">
          {data.map((item, index) => {
            return(
              <Col xs={12} lg={4} key={index}>
                <Card  className="bg-dark">
                  {/* 用可选链避免属性不存在时报错 */}
                  <Card.Img variant="top" src={item?.snippet?.thumbnails?.high?.url || '占位图地址'} />
                  <Card.Body>
                    <Card.Title>{item?.snippet?.title || '无标题'}</Card.Title>
                    <Card.Text>
                      {item?.snippet?.description || '无描述'}
                    </Card.Text>
                  </Card.Body>
                </Card>
              </Col>
            )
          })}
        </Row>
      </Container>
    </div>
  )
}

export default Tutorials

2. 剩余403报错处理 #

如果修改核心逻辑后仍然出现403，请到Google Cloud控制台检查以下配置：

• 确认你已经启用了YouTube Data API v3服务
• 确认API密钥没有设置错误的IP/域名访问限制
• 确认API配额没有耗尽，YouTube Data API每日默认配额为10000单位，playlists.list接口每次请求消耗1单位配额

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