上下文返回未定义 - useContext

Question

我正在尝试以最简单的方式设置 useContext，但它一直返回 undefined。

我已经检查了好几次，但仍然无法破译我遗漏的内容。

Context.js:

import React from 'react';

export const Context = React.createContext();

export function Provider(props) {

    const sayHi = () => {
        console.log('hi')
    }

    const value = {
        actions: {
            sayHi
        }
    }

    return(
        <Context.Provider value={value}>
            {props.children}
        </Context.Provider>
    );
}

消费者组件（Transfer.js）：

import React, { useContext } from 'react';
import { Context } from '../Context';

function Transfer() {
    const value = useContext(Context);
    console.log(value); // ------> returns undefined
    console.log(Context); // ----> it is defined

    return (
        <div className="send">
            // some HTML
        </div>
    );
}


export default Transfer;

Folder structure:

src
└───components
│   └─── Transfer.js
│  
└───App.js
└───App.scss
└───Context.js
    ...

Answer 1

答案：缺少 Provider 根组件

Answer 2

您好@cdgmachado：问题是由于创建上下文值时的空值造成的，而不是使用此值：
导出常量上下文 = React.createContext(null) 这是我读过的。 https://kentcdodds.com/blog/how-to-use-react-context-effectively。你也可以看看我的codesandbox： https://codesandbox.io/s/goofy-bash-z1cnq?file=/src/Context.js:28-76

来自博客：这是谈论的部分的截图：

希望能解决

上下文返回未定义 - useContext

Context returning undefined - useContext

javascript

reactjs

use-context