useContext 挂钩返回未定义答案

【问题标题】：useContext hook returns undefineduseContext 挂钩返回未定义
【发布时间】：2021-05-05 14:36:40
【问题描述】：

在 App 组件内部，我有 Component1，它有一个嵌套组件。我使用React.createContext() 创建了一个 contextApi 以在嵌套组件中使用它。使用useContext() 钩子我试图从App.js 获取myname 值并将其用作样式，但它返回undefined. 应用组件

      import logo from './logo.svg';
      import './App.css';
      import Component1 from '../src/Component1/Component1'
      import React from 'react'
      export const Theme  = React.createContext();
      function App() {

      const myname = {
       width:'100px',
       height:'100px',
       background:'red'
     }
    return (
<Theme.Provider  value={{myname}}>
  <Component1>
    </Component1> 
</Theme.Provider>

); }

   export default App;

组件1

      import NestedComponent from '../NestedComponent/NestedComponent'
      function Component1 (){
      return <NestedComponent></NestedComponent>
       }
     export default Component1

嵌套组件

import Theme from '../App'
import {useContext} from 'react'
  export default function  NestedComponent(){
    const mystyle  = useContext(Theme)   //returns undefined
    return  <div style = {mystyle}>  </div>

}

【问题讨论】：

您将 myname 包装在一个对象中，所以您的上下文是 {myname: {width: '100px'}} 所以，就这样吧，const { myname } = useContext(Theme);
它给出以下错误 TypeError: Cannot destruct property 'myname' of 'Object(...)(...)' as it is undefined.

标签： reactjs use-context

【解决方案1】：

在Theme.Provider 内部这样做：

<Theme.Provider  value={myname}>

它会起作用的。检查here

【讨论】：

它仍然未定义
我的代码中的主题返回：App() { const myname = { background: "red", width: "100px", height: "100px" }; return /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__["jsxDEV"])(Theme.Provide… 但它应该返回 calculateChangedBits: null, _currentValue: undefined, _currentValue2: undefined, _threadCount: 0, Provider: Object…} _calculateChangedBits: null _currentValue ：未定义_currentValue2：未定义_threadCount：0提供者：对象消费者：对象_currentRenderer：对象_currentRenderer2：null
它不将其视为上下文
嘿，我在导入 Theme 时发现了问题，它应该是 import {Theme} from '../App' 但我不明白为什么
因为主题不是 App.js 的默认导出。只有，默认导出可以不带花括号导入。