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（）钩子，但是它总是返回初始值“ 你好”。

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

Answer 1

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

没有什么理由在提供值的完全相同的组件中使用值。为了提供该值，您大概具有导致局部变量的逻辑，并且可以将相同的局部变量重用于需要它的组件的任何其他部分。

为什么useContext（）不返回Provider值，而是返回初始值？

1 个答案: