Menuitem导航材料UI中的Appbar内部

Question

我试图在材料-UI中的appbar内部撰写一个纳维尔。我有以下代码。

当前，使用@material-ui/core版本3.9.2。

class Header extends Component {
  handleMenuOpen = ev => {
    this.setState({ anchorAccountMenu: ev.currentTarget });
  }
  handleMenuClose = ev => {
    this.setState({ anchorAccountMenu: null });
  }
  menuGotoUrl = siteUrl => ev => {
    console.log(siteUrl);
    this.props.history.push(siteUrl);
    this.handleMenuClose(ev);
  }
  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();
    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick={ this.handleMenuOpen }>
        <span className={ classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
      </Button>
      <Menu
        id="user-menu" anchorEl={ anchorAccountMenu }
        getContentAnchorEl= { null }
        disableAutoFocusItem={ true }
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        open={ !!anchorAccountMenu } onClose={ this.handleMenuClose }>
        <MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
          <ListItemIcon className={ classes.menuIcon }>
            <Icon className="far fa-fw fa-user" />
          </ListItemIcon>
          <ListItemText inset primary="Profile" />
        </MenuItem>
        <MenuItem onClick={ this.handleLogout }>
          <ListItemIcon className={ classes.menuIcon }>
            <Icon className="fas fa-fw fa-sign-out-alt" />
          </ListItemIcon>
          <ListItemText inset primary="Logout" />
        </MenuItem>
      </Menu>
    </Toolbar></AppBar>)
  }
}
export default withRouter(withStyles(styles)(Header));

问题是当我选择配置文件Menuitem时，它会返回我的错误，而不是通过react-routes-dom导航到/profile/edit并关闭菜单。

错误：

react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.
    at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
    at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
    at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
    at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21470:25)
    at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22022:18)
    at ref (webpack-internal:///./node_modules/@material-ui/core/MenuList/MenuList.js:203:46)
...
...

我在这里想念什么？谢谢。

Answer 1

我最终通过使用<MenuList />放置<Menu/>来解决它。不确定它在内部有何不同。这也是来自文档的材料-UI的构建菜单的替代方法。

具体来说，这就是我要做的：

  render() {
    let { classes } = this.props;
    let { anchorAccountMenu } = this.state;
    const user = UserService.currentUser();
    let userFirstChar = user.name.charAt(0).toUpperCase();
    return (<AppBar><Toolbar>     
      { /* Some more content here... */ } 
      <Button onClick={ this.handleMenuOpen }>
        <span className={ classes.nameInButton }>{ `${user.name}` }</span>
        <Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
      </Button>
      <Popper open={ !!anchorAccountMenu } anchorEl={ anchorAccountMenu }
        transition disablePortal>{ ({ TransitionProps }) => (
        <Grow {...TransitionProps} id="menu-item-grow"
          style={{ transformOrigin: 'center top' }}
          ><Paper><ClickAwayListener onClickAway={ this.handleMenuClose }>
          <MenuList>
            <MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
              <ListItemIcon className={ classes.menuIcon }>
                <Icon className="far fa-fw fa-user" />
              </ListItemIcon>
              <ListItemText inset primary="Profile" />
            </MenuItem>
            <MenuItem onClick={ this.handleLogout }>
              <ListItemIcon className={ classes.menuIcon }>
                <Icon className="fas fa-fw fa-sign-out-alt" />
              </ListItemIcon>
              <ListItemText inset primary="Logout" />
            </MenuItem>
          </MenuList>
        </ClickAwayListener></Paper></Grow>
      ) }</Popper>
    </Toolbar></AppBar>)
  }
}