单击链接MenuItem时无法关闭Menu

Question

我有AppBar组件和一个菜单。每次我单击任何链接时，都会发生导航，但菜单不会关闭。

import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { Button } from '@material-ui/core';
import * as ROUTES from '../../constants/routes';

class AppBar extends React.Component {
  state = {
    anchorEl: null
  };

   handleCommonMenuOpen = event => {
    this.setState({ anchorEl: event.currentTarget });
  }

  handleCommonMenuClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { anchorEl } = this.state;
    const { classes } = this.props;
    const isMenuOpen = Boolean(anchorEl);
    const renderCommonMenu = (<Menu
                            anchorEl={anchorEl}
                            id="tutorials-menu"
                            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
                            open={isMenuOpen}
                            onClose={this.handleCommonMenuClose}
>
  <MenuItem  onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.AUTHENTICATION_DOC}>Authentication</MenuItem>
  <MenuItem onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.REALTIMEDB_DOC}>Realtime DB</MenuItem>
  <MenuItem onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.HOSTING_DOC}>Hosting</MenuItem>
</Menu>)
    return(
     <div>
        <Button aria-haspopup="true" aria-controls="tutorials-menu" onClick={this.handleCommonMenuOpen} color="inherit">Tutorials</Button>
        {renderCommonMenu}
       <Route path={ROUTES.AUTHENTICATION_DOC} component={AuthenticationDoc} />
       <Route path={ROUTES.REALTIMEDB_DOC} component={ReattimeDBDoc} /> 
     </div>)
  }
}
export default AppBar;

如果单击handleCommonMenuClose，将导致错误。

  

“无法将未定义或null转换为对象”

请问有人可以帮我解决这个问题吗？