重新加载页面时，实质性UI折叠

Question

重新加载页面时UI崩溃。

这仅在我部署项目时出现。我不明白这个问题是从哪里来的。

<div className={classes.root}>
    <AppBar position="absolute" className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>
     <Toolbar disableGutters={!this.state.open}>
     <IconButton color="inherit" aria-label="open drawer" onClick={this.handleDrawerOpen} className={classNames(classes.menuButton, this.state.open && classes.hide)}>
     <MenuIcon />
     </IconButton>
        <Grid container spacing={0}>
          <Grid item xs={5}>
            <Typography variant="title" color="inherit" noWrap>
              <p id="titleheading">{this.state.title}</p>
            </Typography>
          </Grid>
          <Grid item xs={5}></Grid>
          <Grid item xs={2}>
            <Avatar style= {{justifyContent: 'flex-end',}} aria-owns={anchorEl ? 'simple-menu' : null} aria-haspopup="true" onClick={this.handleClick} alt="Logout" src={this.readCookie("ualum").dp} className={classes.avatar} />
          </Grid>
        </Grid>
        <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.handleClose}>
          <MenuItem onClick={this.handleClose} component="a" button href="profile">Profile</MenuItem>
          <MenuItem  onClick={this.Logout.bind(this)} component="a" button href="/">Logout</MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
    <Drawer variant="permanent" classes={{paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),}} open={this.state.open}>
      <div className={classes.toolbar}>
        <IconButton onClick={this.handleDrawerClose}>
          {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
        </IconButton>
      </div>
      <Divider />
      <List onClick={() => {this.changeTitle()}}>{mailFolderListItems}</List>
      <Divider />
      <List>{otherMailFolderListItems}</List>
    </Drawer>
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Mainpage />
    </main>
  </div>