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

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

新規登録して質問してみよう
ただいま回答率
85.35%
React.js

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

Q&A

解決済

2回答

640閲覧

React.jsにおいて、Material-UIを使用時にuseEffectが実行されない

bktclvy

総合スコア63

React.js

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

0グッド

0クリップ

投稿2021/06/15 05:39

編集2021/06/15 06:23

前提・実現したいこと

React.jsでフロントエンドの開発を行っております。
コンポーネント内にMaterial-UIからimportしてきたコンポーネントが入っていると、useEffectが実行されなくなるという現象が起きて困っております。
解決法などご教授いただけないでしょうか?

発生している問題・エラーメッセージ

下記コードにおいて、console.log("hoge1")が実行されません。
しかし、リロードを何度も繰り返すと10回に1回くらいの確率で実行されます。
renderという文字は画面に表示されているので、レンダリングはされているかと思います。

<Paginate>というコンポーネントに限らず、他のMaterial-UIのコンポーネントであってもこの現象は起きます。

該当のソースコード

import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import Pagination from '@material-ui/lab/Pagination'; export default function Home() { useEffect(() => { console.log("hoge1") }, []) return ( <div> render <Pagination count={10} /> </div> ); } if (document.getElementById('home')) { ReactDOM.render(<Home />, document.getElementById('home')); }

試したこと

<Pagination/>コンポーネントを削除→console.log()が実行されました。
・useEffectの第二引数を無くす→変化はありませんでした。

###バージョン等

react@16.14.0 @material-ui/core@4.11.3 @material-ui/lab@4.0.0-alpha.58

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

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

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

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

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

maisumakun

2021/06/15 06:12

material-uiやReactのバージョンはいくつでしょうか?
bktclvy

2021/06/15 06:23

バージョン情報を追記いたしました。 ご確認いただけますと幸いです。
hoshi-takanori

2021/06/15 07:27

とりあえずそれで動くことは動きましたけど…。 どうやって動かしてますか? (create-react-app で作ったプロジェクトですか? 該当のソースコードは index.js ですか? 他に JS ファイルがあったりしますか? index.html に <div id="home"> はありますか?)
bktclvy

2021/06/15 07:39

Laravel Mixという開発環境を使っています。 ソースコードはhome.jsです。 app.jsでhome.jsをrequireして使用しています。 htmlに<div id="home"> は存在しています。 開発環境に関して詳しくなく的外れなお返事でしたら申し訳ありません。
guest

回答2

0

自己解決

maisumakun様
hoshi-takanori様

お二方ありがとうございました。
自己解決いたしました。

結論から言いますと、react,react-domのバージョンを17に上げることで解決しました。
バージョンや開発環境に着目することに気づかせていただいたおかげです。

この度はありがとうございました。

投稿2021/06/15 08:14

bktclvy

総合スコア63

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

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

0

間違えて自己解決にしてしまいましたので、回答を取り消しました

投稿2021/06/15 05:41

編集2021/06/15 05:47
bktclvy

総合スコア63

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問