React：为什么我的上下文值没有更新？答案

【问题标题】：React: Why isn't my context value updated?React：为什么我的上下文值没有更新？
【发布时间】：2021-04-06 07:38:42
【问题描述】：

我正在使用 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()？

【问题讨论】：

标签： javascript reactjs jsx react-context

【解决方案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>
    </>
);

这应该可以解决它。

【讨论】：

谢谢！我过去使用过 Context 并且没有任何问题。我现在正在尝试更好地理解它，我很惊讶我的例子没有按预期工作。我同意这似乎是一个错误！
我也有同样的感觉。浪费了大量时间试图找出原因。但是，如果我们的主和救主丹·阿布拉莫夫不认为这是一个错误，那么它不是。（但是，请随意通过在问题中添加 +1 来向 Dan 施压，或在此处链接此 SO 问题）
嗯，React 中有更多令人困惑的东西，所以我猜这是设计使然 :D

【解决方案2】：

您需要在上下文提供程序中渲染另一个组件以获得 2 的值。正如useContext 的文档所述：

接受一个上下文对象（从 React.createContext 返回的值）并返回该上下文的当前上下文值。当前上下文值由树中调用组件上方最近的的 value prop 确定。

添加了重点。重要的一点是，在组件内调用 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;

【讨论】：

很惊讶我在这里得到了接受，喜欢你在文档中的引用。