无法从React.Context API获取提供程序数据

我试图学习react的上下文api,但我想我对它的一些原则感到困惑。我跟着的那些图特根本不管用。我的反应是正确的。

上下文.js

import React, { Component } from "react";

const MyContext = React.createContext();

export default class MyProvider extends Component {
  state = {
    userName: 'Kelly'
  };

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

应用jsx

import React from 'react';
import MyProvider from '../Context';

const App = () => {
  return(
    <MyProvider>
      <MyContext.Consumer>
        {context => (
          <p>{context}</p>
        )}
      </MyContext.Consumer>
      </MyProvider>
  );
}

export default App;