React useContext返回值为undefined问题求助

问题根源 #

你犯了Context导出与导入的关键错误：

• 在MovieContextProvider.jsx中，你创建了MovieContext但未导出它，仅导出了Provider组件。
• 在Movies.jsx中，错误地将MovieContextProvider组件当作Context对象传入useContext，导致useContext无法识别正确上下文，最终返回undefined。

修复步骤 #

1. 修改MovieContextProvider.jsx，导出MovieContext

在文件末尾添加MovieContext的导出，同时建议给useState设置空数组作为初始值，避免未加载时出现undefined：

import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios';

const MovieContext = createContext();

const URL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=9813ce01a72ca1bd2ae25f091898b1c7";

function MovieContextProvider({ children }) {
    const [movieData, setMovieData] = useState([]);

    useEffect(() => {
        axios.get(URL)
            .then((response) => setMovieData(response.data.results))
            .catch((error) => console.log(error));
    }, []);

    return (
        <MovieContext.Provider value={movieData}>
            {children}
        </MovieContext.Provider>
    );
}

// 同时导出Context和Provider
export { MovieContext };
export default MovieContextProvider;

2. 修改Movies.jsx，正确导入MovieContext

将导入的MovieContextProvider替换为MovieContext：

import React from 'react';
import { useContext } from 'react';
// 导入正确的MovieContext
import { MovieContext } from '../Contexts/MovieContextProvider';

function Movies() {
    const movieData = useContext(MovieContext);

    console.log(movieData);

    return (
        <div>
            Movies...
            {/* 可添加电影渲染逻辑 */}
            {movieData.map(movie => (
                <div key={movie.id}>{movie.title}</div>
            ))}
        </div>
    );
}

export default Movies;

额外优化建议 #

• 可以在Provider中添加isLoading状态，在Movies组件中显示加载提示，避免用户看到空白页面：

// 在MovieContextProvider中新增状态
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    axios.get(URL)
        .then((response) => {
            setMovieData(response.data.results);
            setIsLoading(false);
        })
        .catch((error) => {
            console.log(error);
            setIsLoading(false);
        });
}, []);

// 传递多个状态到上下文
return (
    <MovieContext.Provider value={{ movieData, isLoading }}>
        {children}
    </MovieContext.Provider>
);

在Movies组件中使用加载状态：

const { movieData, isLoading } = useContext(MovieContext);

if (isLoading) return <div>加载中...</div>;

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