javascript - 在 React 中未定义 useContext()

Question

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("")，这将返回""。我在这里做错了什么？

Answer 1

您将value在 Provider 下的任何子组件中访问您的道具

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

像消费它...

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


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

Answer 2

const Context = React.createContext();

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

和

React.useContext

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

然后不要使用新功能重新定义，例如useContext. 直接React.useContext在组件上使用钩子而不是导出