React中使用useContext调用GlobalContext时出现TypeError错误

在React应用中尝试从useContext(GlobalContext)解构属性时遇到TypeError，错误提示无法解构(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)的isLoading属性，因为它是undefined。

相关代码 #

GlobalState.js #

import React from 'react';
import useSpeakerDataManager from './useSpeakerDataManager';

export const GlobalContext = React.createContext();

export const GlobalProvider = ({ children }) => {
    const { isLoading, speakerList, toggleSpeakerFavorite } = useSpeakerDataManager();

    const provider = {
        isLoading,
        speakerList,
        toggleSpeakerFavorite,
    };

    return (
        <GlobalContext.Provider value={provider}>
            {children}
        </GlobalContext.Provider>
    );
};

Speakers.js #

import React, { useState, useMemo, useContext, useCallback } from 'react';
import { GlobalContext } from './GlobalState';

const Speakers = ({}) => {
    // ... (其他代码)

    const { isLoading, speakerList, toggleSpeakerFavorite } = useContext(GlobalContext);

    // ... (剩余代码)
};

错误信息 #

运行npm run dev时出现如下错误：
Server Error TypeError: Cannot destructure property 'isLoading' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined.

已做排查 #

• GlobalContext在GlobalState.js中创建，并通过GlobalProvider提供
• 在Speakers.js中使用useContext钩子获取GlobalContext中的值
• useSpeakerDataManager函数用于填充GlobalContext中的值
• 错误明确发生在解构useContext返回值的代码行

解决方案建议 #

1. 给GlobalContext设置默认值 #

React.createContext的默认值会在组件未被Provider包裹时生效，设置默认值可以避免解构undefined的问题，同时验证Provider是否正确生效：

export const GlobalContext = React.createContext({
  isLoading: true,
  speakerList: [],
  toggleSpeakerFavorite: () => {} // 空函数避免调用时出错
});

2. 确认Provider层级正确性 #

检查根组件/App组件中，GlobalProvider是否完整包裹了Speakers组件，示例：

import { GlobalProvider } from './GlobalState';
import Speakers from './Speakers';

function App() {
  return (
    <GlobalProvider>
      {/* 确保Speakers及所有需要使用context的组件都在Provider内部 */}
      <Speakers />
    </GlobalProvider>
  );
}

3. 验证useSpeakerDataManager的返回值 #

在GlobalProvider中添加日志，确认useSpeakerDataManager返回的对象是否包含预期属性：

export const GlobalProvider = ({ children }) => {
    const speakerData = useSpeakerDataManager();
    console.log('useSpeakerDataManager返回值:', speakerData); // 检查输出是否符合预期
    const { isLoading, speakerList, toggleSpeakerFavorite } = speakerData;

    const provider = {
        isLoading,
        speakerList,
        toggleSpeakerFavorite,
    };

    return (
        <GlobalContext.Provider value={provider}>
            {children}
        </GlobalContext.Provider>
    );
};

4. 检查导入路径正确性 #

确认Speakers.js中导入GlobalContext的路径是否正确，避免因路径错误导致使用了未被Provider关联的Context实例。

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