反应：为什么我的上下文值没有更新？

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

您必须使用一个单独的组件才能使上下文工作。

我已经对此提交了一个bug；看见https://github.com/facebook/react/issues/18629

只需使用上下文将代码拆分为不同的组件。

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

这应该能解决问题。

Answer 2

您需要在上下文提供程序中呈现另一个组件才能获得值2。正如useContext的文件所述：

接受上下文对象(从React.createContext返回的值(并返回该上下文的当前上下文值。当前上下文值由最接近<MyContext。提供商>位于树中调用组件的上方。

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