YouTube API 在 React JS 控制台中返回未定义 [关闭]

Question

我正在尝试从 youtube 频道播放列表中获取上传的视频。我遇到的问题是，当我对响应进行控制台记录时，YouTube API 响应在 Chrome 的控制台中返回未定义。我正在使用 React JS，下面的代码是我到目前为止所做的。

import React from 'react';
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';

const YouTube_Playlist_Items_API = process.env.REACT_APP_YouTube_PlayList_Item_API_URL;
const YouTube_Key = process.env.REACT_APP_YouTube_API_Key;
const YouTube_Playlist_ID = process.env.REACT_APP_YouTube_PlayList_Item_ID;
const YouTube_MaxResults = process.env.REACT_APP_YouTube_PlayList_Max_Results;

export async function getLatestYouTubePost(){
    const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&maxResults=${YouTube_MaxResults}&playlistId=${YouTube_Playlist_ID}&key=${YouTube_Key}`);
    const data = await res.json();
    console.log('data', data);
    return {
        props:{
            data
        }
    }
}

const Home = ({data}) => {
        getServerSideProps();
    return (
        <>
            <Header/>
            <div className='homeBody'>
                <p>Hello</p>
            </div>
            <Footer />
        </>
    );
}

export default Home;

更新：

我发现，如果我从 getLatestYouTubePost() 中删除 export 并在 home 函数中调用该函数，响应将不再返回 undefined。下面的代码是更新版本。

import React, { useState, useEffect } from 'react';
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Repositories
import { Navigate } from 'react-router-dom';

const YouTube_Playlist_Items_API = process.env.REACT_APP_YouTube_PlayList_Item_API_URL;
const YouTube_Key = process.env.REACT_APP_YouTube_API_KEY;
const YouTube_Playlist_ID = process.env.REACT_APP_YouTube_PlayList_Item_ID;
const YouTube_MaxResults = process.env.REACT_APP_YouTube_PlayList_Max_Results;

async function getLatestYouTubePost(){
    const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&playlistId=${YouTube_Playlist_ID}&maxResults=${YouTube_MaxResults}&key=${YouTube_Key}`);
    const data = await res.json();
    return {
        props: {
          data
        }
    }
}

const Home = ({data}) => {
    console.log('data', data);
    return (
        <>
            <Header/>
            <div className='homeBody'>
                <p>Hello</p>
            </div>
            <Footer />
        </>
    );
}

export default Home;

Answer 1

看来你拼错了

playlistId

不是

playlistID

.