React使用useContext钩子无法获取上下文name值问题求助

核心错误点 #

你的代码存在2个会导致上下文失效的关键问题：

• 1. AuthContext.js 中未导入createContext方法就直接调用，会触发引用错误，导致上下文对象本身创建失败
• 2. App.js 中AuthProvider的导入方式错误：AuthProvider是命名导出，你用默认导入的写法，实际拿到的是默认导出的AuthContext上下文对象，把上下文对象当做Provider组件渲染，根本无法向子组件传递上下文值

具体修复步骤 #

1. 修复AuthContext.js，补充缺失的导入 #

修改后的完整代码：

// 新增这行，从react导入createContext
import { createContext } from 'react';

const AuthContext = createContext()

export default AuthContext;

export const AuthProvider = ({children}) => {
    return (
        <AuthContext.Provider value={{name:"Dennis"}}>
            {children}
        </AuthContext.Provider>
    )
}

2. 修复App.js中AuthProvider的导入语句 #

原来的默认导入写法错误，改成命名导入：

// 替换原来错误的默认导入写法
import { AuthProvider } from './context/AuthContext';

App.js其余代码不需要改动。

3. 可选优化：清理Header.js的无效导入 #

Header.js中导入了未使用的createContext，可以直接删掉，修改后导入部分如下：

import React, { useContext } from 'react'
import { Link } from 'react-router-dom'
import AuthContext from '../context/AuthContext'

验证结果 #

修改完成后保存刷新页面，Header组件就能正常从上下文读取到name字段，页面会正常显示Hello Dennis。

内容的提问来源于stack exchange，提问作者isabella-re