为什么 useContext() 不返回 Provider 值而是返回初始值？

Question

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

const messageContext = createContext("Hello");

const Context = () => {

    const message = useContext(messageContext);

    return (
        <messageContext.Provider value="Hi">

            <div style={{ marginTop: 1000 }}>{message}</div> 
            {/* Result: Hello */}

            <messageContext.Consumer>
                {message => {
                    return <div style={{ marginTop: 1000 }}>{message}</div>;
                }}
            </messageContext.Consumer>
            {/* Result: Hi */}

        </messageContext.Provider>
    );
};
export { Context };

我想使用 useContext() 挂钩，但它总是 returns 初始值，即“Hello” .

使用没有问题。它 returns“嗨”但我想使用 useContext 挂钩。

Answer 1

当您从上下文中获取某些内容时，您会从组件树向上最近的提供者处获取它。由于您在 Context 组件中调用了 useContext，它会在树中寻找比 Context 更高的提供者。 None 存在，因此您将获得默认值。 messageContext.Consumer 的示例在提供者内部，因此它可以看到该值。

没有理由在提供值的同一组件中使用值。为了提供该值，您可能需要一些逻辑来生成局部变量，并且您可以为需要它的组件的任何其他部分重用该相同的局部变量。

为什么 useContext() 不返回 Provider 值而是返回初始值？

Why is useContext() not returning the Provider value instead returning the initial value?

reactjs

react-context

use-context