React useContext() 不讀取上下文值？

Question

這是我的代碼的樣子：

上下文.js：

const Context = createContext();
export default Context;

上下文提供者.js：

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

父類.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時沒有任何記錄。 我go到底哪里錯了？ 根據我的理解，我遵循了創建上下文 + 提供者的必要步驟，確保使用組件將提供者作為其祖先組件之一，然后使用 useContext() 訪問上下文。

Answer 1

考慮到您希望 Context Provider 的價值支柱是 object 之類的

{ data : 1 }

您可能忘記了額外的大括號，因為第一對是 JSX 語法，用於將內容解釋為 JavaScript 而不是字符串。

因此，您在 ContextProvider.js 文件中的 value prop 可能應該如下所示：

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