Possuo um component drawer do Material React UI e preciso que quando o componente seja montado, cheque no localStorage
e pegue o valor do usuário logado para mostrar no template.
Esse é meu componente:
const PersistentDrawer = () => {
const [userLogged, setUserLogged] = useState({});
useEffect(() => {
setUserLogged(JSON.parse(localStorage.getItem('currentUser')))
// eslint-disable-next-line react-hooks/exhaustive-deps
},[])
const classes = drawerStyles();
const theme = useTheme();
const [open, setOpen] = useState(false);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<img className={classes.logo} alt="Incca Sistemas" src="/assets/logo-incca.png"></img>
<div className={classes.drawerHeader}>
<Typography component="h6">{userLogged.login}</Typography>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</Drawer>
<main
className={clsx(classes.content, {
[classes.contentShift]: open,
})}
>
</main>
</div>
);
}
export default PersistentDrawer
Quando eu abro/fecho meu drawer eu recebo:
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Porque isso ocorre?