javascript - react : Why isn't my context value updated?

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>
    </>
);

那应该解决它。