I'm new in react and I try to use a context for passing current username, I follow the tutorial, but it seems that my context is always undefined, can someone explain what I'm doing wrong?
const AppContext = React.createContext({});
class App extends React.Component {
  componentDidMount() {
    this.setState({
      User: {
        Username: "Guest",
        UserType: {
          Description: "Guest"
        }
      }
    });
  }
  render() {
    return (<div className="App">
      <AppContext.Provider value={this.state}>
        <Toolbar/>
        <!--This work fine-->
        <h3>{this.state.User.Username}</h3>
      </AppContext.Provider>
    </div>);
  }
}
class Toolbar extends React.Component {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
    <header className="toolbar">
      <!-- print the username -->
    </header>
    );
  }
}
export default Toolbar;

class Toolbar extends React.Component {
  static contextType = AppContext;
  render() {
    return (
      <header className="toolbar">
        <!-- 打印用户名 -->
      </header>
    )
  }
}