React useContext()未读取中的上下文值

Question

这就是我的代码：

Context.js:

const Context = createContext();
export default Context;

ContextProvider.js:

import Context from './Context';
const ContextProvider = () =>
{
....
return(<Context.Provider value={data: 1}>{props.children}</Context.Provider>
}

ParentClass.js:

const ParentClass = () => 
{
...
return(
<div>
...
{boolValue ? (
<ContextProvider>
<ConsumerComponent/>
</ContextProvider>) 
</div>)
}

ConsumerComponent.js:

import Context from './Context.js';
const ConsumerComponent = () => {
const contextData = useContext(Context);
...
}

我的问题是ConsumerComponent似乎无法访问上下文数据；当我添加const contextData = useContext(Context);行时，它根本不会呈现，当我尝试打印contextData时，也不会记录任何内容。我到底哪里出了问题？根据我的理解，我遵循了创建上下文+提供者的必要步骤，确保消费组件有一个提供者作为其祖先组件之一，然后使用useContext((访问上下文。

Answer 1

考虑到您希望上下文提供程序的值道具是类似的对象

{ data : 1 }

您可能忘记了额外的大括号，因为第一对是将内容解释为JavaScript而不是字符串的JSX语法。

所以ContextProvider.js文件上的值道具可能应该是这样的：

<Context.Provider value={{data: 1}}>{props.children}</Context.Provider>