Javascript React上下文提供程序未传递值

我刚刚开始学习上下文，并遵循一个教程。确实做了Wes Bos所做的，但该州仍然没有像预期的那样通过消费者

TypeError:无法读取未定义的属性“name”。发生此错误

已经尝试过制作功能组件，但同样的事情也发生了

上下文组件：

import React, {Component} from 'react';

const MyContext = React.createContext();
export default class MyProvider extends Component {
    state = {
        name: "John Doe",
        age: 23,
    };

    render() {
        return (
            <MyContext.Provider value={this.state}>
                {this.props.children}
            </MyContext.Provider>
        )
    }
}

export const Consumer = MyContext.Consumer;

以及人员组成部分：

import React, {Component} from 'react';
import {Consumer} from '../Context.js'
export default class Person extends Component {
    render() {
        return (
                <Consumer>
                    {
                        (value) => {
                            return (
                                <React.Fragment>
                                    <p>I am inside the consumer {value.name} </p>
                                </React.Fragment>
                            )
                        }
                    }
                </Consumer>
        );
    }
}

预期的输出应该是“我在消费者John Doe中”

---

错误如下：TypeError:无法读取未定义的属性“name”

问题似乎是您实际上没有在代码中的任何位置使用MyContext.provider调用上下文提供程序组件

我举了一个有效的例子：

下面是代码的另一个工作示例：

您忘记调用MyContext组件，因为您需要将使用者子项传递给它

从React导入React； 从react-dom导入ReactDOM； 从导入MyContext。/MyContext； 进口人/人； 导入./styles.css； 功能应用程序{ 回来 ; } const rootElement=document.getElementByIdroot； ReactDOM.render，根元素；