Youtube API 数据未存储在 useState 变量中

Question

我在使用 YouTube API 在 React 应用程序中获取数据时遇到问题。虽然数据已成功获取，但它似乎没有按预期存储在 useState 变量中。因此，我的 VideoCard 组件（依赖于该数据）不会被调用。如何解决此问题并确保获取的数据正确存储在状态变量中？

import React, { useEffect, useState } from "react";
import { YOUTUBE_VIDEOS_API } from "../utils/constants";
import VideoCard from "./VideoCards";

const VideoContainer = () => {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    getVideos();
  }, []);

  const getVideos = async () => {
    try {
      const data = await fetch(YOUTUBE_VIDEOS_API);
      const json = await data.json();

      setVideos([...videos, ...json?.items]);
      console.log(json);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className="m-4 flex flex-wrap">
      {videos.map((card, index) => {
        <VideoCard key={index} card={card} />;
      })}
    </div>
  );
};

export default VideoContainer;

Outputjson：{“kind”：“youtube#videoListResponse”，

etag：“fQlUo5S4JJ9QA_SUhvAXezB2SHI”，

项目：[{.....},{.....},{.....},],

nextPageToken：“CAUQAA”，

}

Answer 1

我认为你需要在这里使用 return 关键字：

<div className="m-4 flex flex-wrap">
  {videos.map((card, index) => {
    return <VideoCard key={index} card={card} />;
  })}
</div>