React中如何将getServerSideProps结果传递给Home组件？

核心问题 #

你用的是普通React + react-router-dom，但getServerSideProps是Next.js专属的服务端渲染函数，普通React框架根本不会识别这个函数，直接导出它只会导致异常，手动调用也无法正确传递数据。

普通React项目的正确实现方案 #

直接用React的useState和useEffect处理异步请求，把数据存到组件状态里再展示：

import React, { useState, useEffect } from 'react';
import './Home.css'
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
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;

const Home = () => {
    // 定义状态存储数据、加载状态、错误信息
    const [videos, setVideos] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [fetchError, setFetchError] = useState(null);

    useEffect(() => {
        // 封装异步请求函数
        const loadPlaylist = async () => {
            try {
                const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&playlistId=${YouTube_Playlist_ID}&maxResults=${YouTube_MaxResults}&key=${YouTube_Key}`);
                
                // 检查请求是否成功
                if (!res.ok) throw new Error(`请求失败：${res.status}`);
                
                const data = await res.json();
                console.log('获取到的播放列表数据:', data);
                // 将视频列表存入状态
                setVideos(data.items || []);
            } catch (err) {
                setFetchError(err.message);
                console.error('加载播放列表出错:', err);
            } finally {
                setIsLoading(false);
            }
        };

        // 组件挂载时执行请求
        loadPlaylist();
    }, []);

    // 加载中/错误/数据展示的分支逻辑
    if (isLoading) return <div className='homeBody'>加载中...</div>;
    if (fetchError) return <div className='homeBody'>加载失败：{fetchError}</div>;

    return (
        <>
            <Header/>
            <div className='homeBody'>
                <h2>我的YouTube播放列表</h2>
                {/* 遍历视频数据渲染 */}
                <div className='video-grid'>
                    {videos.map(video => (
                        <div key={video.id} className='video-card'>
                            <img 
                                src={video.snippet.thumbnails.medium.url} 
                                alt={video.snippet.title}
                                className='video-thumbnail'
                            />
                            <h3 className='video-title'>{video.snippet.title}</h3>
                            <p className='video-desc'>{video.snippet.description.slice(0, 100)}...</p>
                        </div>
                    ))}
                </div>
            </div>
            <Footer />
        </>
    );
}

export default Home;

关键修改点

1. 移除无用的getServerSideProps函数，普通React不支持该机制
2. 用useState管理视频数据、加载状态和错误信息，确保UI能响应数据变化
3. 用useEffect在组件挂载时发起异步请求，处理成功/失败/完成的逻辑
4. 添加加载状态和错误状态的UI反馈，提升用户体验
5. 遍历视频数据，渲染每个视频的缩略图、标题和描述

如果你实际是Next.js项目（误用了react-router-dom） #

如果你的项目是Next.js，应该用Next.js自带的路由系统，并且正确导出getServerSideProps，框架会自动调用该函数并把数据通过props传给组件：

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

// Next.js环境变量推荐用NEXT_PUBLIC_前缀（服务端调用也可以不用，但客户端需要的话必须加）
const YouTube_Playlist_Items_API = process.env.NEXT_PUBLIC_YOUTUBE_PLAYLIST_ITEM_API_URL;
const YouTube_Key = process.env.NEXT_PUBLIC_YOUTUBE_API_KEY;
const YouTube_Playlist_ID = process.env.NEXT_PUBLIC_YOUTUBE_PLAYLIST_ITEM_ID;
const YouTube_MaxResults = process.env.NEXT_PUBLIC_YOUTUBE_PLAYLIST_MAX_RESULTS;

// 组件通过props接收服务端获取的数据
const Home = ({ playlistData }) => {
    const videos = playlistData.items || [];

    return (
        <>
            <Header/>
            <div className='homeBody'>
                <h2>我的YouTube播放列表</h2>
                <div className='video-grid'>
                    {videos.map(video => (
                        <div key={video.id} className='video-card'>
                            <img 
                                src={video.snippet.thumbnails.medium.url} 
                                alt={video.snippet.title}
                                className='video-thumbnail'
                            />
                            <h3 className='video-title'>{video.snippet.title}</h3>
                            <p className='video-desc'>{video.snippet.description.slice(0, 100)}...</p>
                        </div>
                    ))}
                </div>
            </div>
            <Footer />
        </>
    );
}

// 必须导出getServerSideProps，Next.js会自动在服务端调用它
export async function getServerSideProps() {
    try {
        const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&playlistId=${YouTube_Playlist_ID}&maxResults=${YouTube_MaxResults}&key=${YouTube_Key}`);
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        
        const data = await res.json();
        console.log('服务端获取的播放列表数据:', data);
        
        return {
            props: { playlistData: data }
        }
    } catch (err) {
        console.error('服务端加载播放列表出错:', err);
        // 返回空数据避免组件报错
        return { props: { playlistData: { items: [] } } }
    }
}

export default Home;

注意事项

• 不要手动调用getServerSideProps，Next.js会自动处理
• 组件必须通过props接收服务端传递的数据
• 确保环境变量配置正确，Next.js中客户端可访问的变量需要加NEXT_PUBLIC_前缀

额外检查项 #

1. 确认环境变量是否正确加载：可以在控制台打印process.env.REACT_APP_YouTube_API_KEY（或Next.js的NEXT_PUBLIC_变量），确保值不为undefined
2. 检查YouTube API密钥的配额和权限：确保密钥有YouTube Data API v3的访问权限，且配额未用尽
3. 确认播放列表ID是否正确：可以直接在浏览器中访问拼接好的API URL，验证是否能返回正确数据

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