前提・実現したいこと
react初心者です。Material UIを使用してアプリを作成しています。
発生している問題・エラーメッセージ
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Componentのコードを書いてサイトを更新していたら突然表示されるようになりました。
該当のソースコード
React
1import React from 'react'; 2import { makeStyles } from '@material-ui/core/styles'; 3import Drawer from '@material-ui/core/Drawer'; 4import CssBaseline from '@material-ui/core/CssBaseline'; 5import HomeIcon from '@material-ui/icons/Home'; 6import SettingsIcon from '@material-ui/icons/Settings'; 7import List from '@material-ui/core/List'; 8import Divider from '@material-ui/core/Divider'; 9import ListItem from '@material-ui/core/ListItem'; 10import ListItemIcon from '@material-ui/core/ListItemIcon'; 11import ListItemText from '@material-ui/core/ListItemText'; 12import NotificationsIcon from '@material-ui/icons/Notifications'; 13import MailIcon from '@material-ui/icons/Mail'; 14 15const drawerWidth = 240; 16 17const useStyles = makeStyles((theme) => ({ 18 root: { 19 display: 'flex', 20 }, 21 appBar: { 22 width: `calc(100% - ${drawerWidth}px)`, 23 marginLeft: drawerWidth, 24 }, 25 drawer: { 26 width: drawerWidth, 27 flexShrink: 0, 28 }, 29 drawerPaper: { 30 width: drawerWidth, 31 }, 32 content: { 33 flexGrow: 1, 34 backgroundColor: theme.palette.background.default, 35 padding: theme.spacing(3), 36 }, 37 // necessary for content to be below app bar 38 toolbar: theme.mixins.toolbar, 39 40})); 41 42export default function PermanentDrawerLeft() { 43 const classes = useStyles(); 44 45 return ( 46 <div className={classes.root}> 47 <CssBaseline /> 48 {/* サイドバー */} 49 <Drawer 50 className={classes.drawer} 51 variant="permanent" 52 classes={{ 53 paper: classes.drawerPaper, 54 }} 55 anchor="left" 56 > 57 <div className={classes.toolbar} /> 58 <Divider /> 59 <List> 60 {['ダッシュボード', 'メッセージ',].map((text, index) => ( 61 <ListItem button key={text}> 62 <ListItemIcon>{index % 2 === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon> 63 <ListItemText primary={text} /> 64 </ListItem> 65 ))} 66 </List> 67 <Divider /> 68 <List> 69 {['設定', 'お知らせ'].map((text, index) => ( 70 <ListItem button key={text}> 71 <ListItemIcon>{index % 2 === 0 ? <SettingsIcon /> : <NotificationsIcon />}</ListItemIcon> 72 <ListItemText primary={text} /> 73 </ListItem> 74 ))} 75 </List> 76 </Drawer> 77 {/* コンテンツ */} 78 <main className={classes.content}> 79 80 {/*カード*/} 81 {/* <Grid container spacing={5} alignItems="flex-end"> 82 <TopCard></TopCard> 83 </Grid> */} 84 {/* お知らせ欄 */} 85 </main> 86 </div> 87 ); 88}
補足情報
reactのバージョンは、^17.0.1です
浅学ですが、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー