React中useContext报错：TypeError: 无法读取undefined的'name'属性求助

问题根源 #

你自定义的Provider组件没有接收并渲染children属性，导致被<Provider>包裹的<Contx>组件并没有纳入Info.Provider的上下文作用域中。此时useContext(Info)获取到的是createContext()的默认值（undefined），访问hi.name自然会抛出类型错误。

修复步骤 #

只需要修改Context.js文件，给自定义的Provider组件添加children参数，并在Info.Provider内部渲染该参数：

import { createContext } from "react";
    
const Info = createContext()
// 添加children参数
function Provider({ children }){
    const name = 'Arko'
    return(
        // 在Provider内部渲染children
        <Info.Provider value={{name}}>{children}</Info.Provider>
    )
}
export {Provider}
export default Info

验证说明 #

修改后，<Contx>组件会被正确纳入上下文作用域，useContext(Info)就能拿到你传递的{name: 'Arko'}对象，页面就能正常显示'Arko'了。你的Contx.js和App.js代码无需修改。

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