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

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

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

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

那应该可以解决它。

Answer 2

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

<块引用>

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

强调了。重要的一点是，在组件内调用 useContext 的位置并不重要 - 重要的是调用它的组件在树中的位置。

useContext

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

2 个答案: