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

【问题标题】：Why is useContext() not returning the Provider value instead returning the initial value?为什么 useContext() 不返回 Provider 值而是返回初始值？
【发布时间】：2020-08-07 01:39:03
【问题描述】：

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() 钩子，但它总是返回初始值“Hello”。

使用没有问题。它返回“Hi”，但我想使用 useContext 挂钩。

【问题讨论】：

标签： reactjs react-context use-context

【解决方案1】：

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

几乎没有理由在您提供它的完全相同的组件中使用一个值。为了提供值，您可能有一些逻辑会导致局部变量，并且您可以将相同的局部变量重用于组件的任何其他需要它的部分。

【讨论】：