React：為什么我的上下文值沒有更新？

Question

我正在玩 React Context API。 我創建了一個簡單的組件：

import React, { createContext, useContext } from 'react';

const MyContext = createContext(1);

const MyComponent = () => (
    <>
        <p>{useContext(MyContext)}</p>
        <MyContext.Provider value={2}>
            <p>{useContext(MyContext)}</p>
        </MyContext.Provider>
    </>
);

export default MyComponent;

我得到兩個<p>1</p> 。 為什么不使用2更新第二個上下文？ 我是否錯誤地使用useContext() ？

Answer 1

您必須使用單獨的組件才能使 Context 正常工作。

我已經提交了一個關於這個的錯誤； 見https://github.com/facebook/react/issues/18629

只需使用 Context 將代碼拆分為不同的組件。

const Inner = () => (
    <p>{useContext(MyContext)}</p>
);

const MyComponent = () => (
    <>
        <p>{useContext(MyContext)}</p>
        <MyContext.Provider value={2}>
            <Inner />
        </MyContext.Provider>
    </>
);

那應該解決它。

Answer 2

您需要在上下文提供程序中呈現另一個組件以獲得 2 的值。正如useContext的文檔所述：

接受上下文 object（從 React.createContext 返回的值）並返回該上下文的當前上下文值。 當前上下文值由樹中調用組件上方最近的 <MyContext.Provider> 的 value 屬性確定。

重點補充。 重要的一點是，在組件內調用useContext的位置無關緊要 - 重要的是調用它的組件在樹中的位置。

import React, { createContext, useContext } from "react";

const MyContext = createContext(1);

const ChildComponent = () => (
  <p>{useContext(MyContext)}</p>
)

const MyComponent = () => (
  <>
      <p>{useContext(MyContext)}</p>
      <MyContext.Provider value={2}>
        <ChildComponent/>
      </MyContext.Provider>
  </>
);

export default MyComponent;