为什么我的 React 应用程序在初始渲染后不断向 YouTube API 发出请求？

Question

我很难准确理解 Youtube API 到底发生了什么。

看来我在 React 中开发的应用程序即使在初始渲染完成后也会不断向 Youtube API 发出请求。我必须回去刷新我对 useEffect 的理解，并意识到它的设置是正确的，然后即使在我实现了一种缓存初始请求的方法之后，它似乎仍在根据我在网络选项卡中可以得知的内容发出请求，并且显然这耗尽了我的配额。

在我开发了一个自定义挂钩来存储从 YouTube 获取的 8 个非常具体的视频后，我开始注意到它。这是我的

useVideos

自定义挂钩：

import { useState, useEffect } from "react";
import youtube from "../apis/youtube";

const useVideos = () => {
  const [videos, setVideos] = useState(() => {
    const cachedVideos = localStorage.getItem("cachedVideos");
    return cachedVideos ? JSON.parse(cachedVideos) : [];
  });

  useEffect(() => {
    if (videos.length === 0) {
      fetchSpecificVideos();
    }
  }, []);

  const fetchSpecificVideos = async () => {
    try {
      const videoIds = [
        "VIDEO_1",
        "VIDEO_2",
        "VIDEO_3",
        "VIDEO_4",
        "VIDEO_5",
        "VIDEO_6",
        "VIDEO_7",
        "VIDEO_8",
      ];
      const videoData = [];

      for (const videoId of videoIds) {
        const response = await youtube.get("/videos", {
          params: {
            id: videoId,
            part: "snippet",
            maxResults: 8,
          },
        });
        if (response.data.items && response.data.items.length > 0) {
          videoData.push(response.data.items[0]);
        }
      }

      setVideos(videoData);
      localStorage.setItem("cachedVideos", JSON.stringify(videoData));
    } catch (error) {
      console.error("Error fetching videos:", error);
    }
  };

  return [videos, fetchSpecificVideos];
};

export default useVideos;

注意：我确实用您在上面看到的内容替换了实际的 id。

在我的实际 api 文件中，我有以下内容：

import axios from "axios";

const KEY = "my-youtube-api-key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {
    part: "snippet",
    maxResults: 8,
    key: KEY,
  },
});

Answer 1

更新useEffect代码

useEffect(() => {
    if (videos.length === 0) {
      fetchSpecificVideos();
    }
  }, [videos.length]);