在 React 中未定义 useContext()答案

【问题标题】：useContext() is undefined in React在 React 中未定义 useContext()
【发布时间】：2021-02-16 09:19:37
【问题描述】：

import React from 'react';

const Context = React.createContext();
const Provider = ({children}) => {
   const color = "blue";
   return (<Context.Provider value={color}>{children}</Context.Provider>);
};

const useContext = () => {
   const context = React.useContext(Context);
   console.log(context); // undefined
}

export {useContext};

React.useContext(Context) 返回undefined 值。如果我尝试const Context = React.createContext("")，则返回""。我在这里做错了什么？

【问题讨论】：

我认为你应该阅读这个：reactjs.org/docs/hooks-reference.html#usecontext
如何使用你定义的useContext函数？
请展示可重现的例子How to create a Minimal, Reproducible Example
您可以使用 Stack Snippets（[<>] 工具栏按钮）使您的 MRE 可运行。 Stack Snippets 支持 React，包括 JSX； here's how to do one。这有助于人们帮助你。
你真的使用过你的Provider吗？默认值为undefined，因为您没有将任何参数传递给createContext。

标签： javascript reactjs

【解决方案1】：

您将在您的 Provider 下的任何子组件中访问您的 value 属性

  export const useColorContext = () => React.useContext(Context);

像...一样消费它

<Context.Provider value={color}>
  <ChildComponent>...</ChildComponent>
</Context.Provider>


function ChildComponent() {
  const currentColor = useColorContext();
  /** ... */
}

【讨论】：

散布仇恨？什么？我对错误发表了评论，在您修复它后我将其删除并投票。

【解决方案2】：

const Context = React.createContext();

这将启动上下文。最初上下文值为空

和

React.useContext

它将调用提供者的值。所以它应该是提供者的子组件。否则为空。

然后不要使用 useContext 之类的新功能重新定义。直接在组件上使用React.useContext钩子而不是导出

【讨论】：