質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2573閲覧

ReactのHook Callエラー対処法を教えて下さい。

pokkii0206

総合スコア2

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/01/29 07:32

編集2021/01/29 12:43

前提・実現したいこと

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です

浅学ですが、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/01/29 10:15

そのエラーはどの行で出てるか分かりますか?
pokkii0206

2021/01/29 12:42 編集

PermanentDrawerLeft()内の const classes = useStyles(); で出ています
pokkii0206

2021/01/29 13:13

無事解決できました、hoshi-takanoriさん有難うございました!
guest

回答1

0

自己解決

npm install @material-ui/coreをしたら直りました。

投稿2021/01/29 13:13

pokkii0206

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問