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

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

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

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

解決済

router.pushで自身のページをpushした時、「Too many re-renders」となる

askyq
askyq

総合スコア45

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

1回答

0評価

1クリップ

258閲覧

投稿2022/07/21 05:21

Next.jsでシステムを作っていますが、router.pushで自身のページのパスを指定して実行した時にToo many re-rendersエラーが出ます。

ソースコード

実際はもっとたくさんありますが、主要なファイルは2つあります。/user/settings/accountまたは/user/settings/securityにアクセスした状態でSettingsComponent.tsxにあるリンクをクリックすると必ずエラーが発生します。

js:pages/user/settings/[tab].tsx

import styles from '../../../styles/CommonPageBase.module.scss' import { MouseEvent, useEffect } from 'react'; import { GetServerSideProps } from 'next' import Header from '../../../components/global/Header'; import { useTranslation } from 'react-i18next'; import PropsPicker, { CommonProps } from '../../../models-server/data/props'; import SettingsComponent from '../../../components/page/user/SettingsComponent'; export default function Settings(props: CommonProps) { const [ t, i18n ] = useTranslation(); i18n.changeLanguage(props.lang); return ( <div className={`${styles.theme1} theme1`}> <SettingsComponent props={props}/> </div> ) } // getServerSideProps

js:pages/user/settings/SettingsComponent.tsx

import styles from './Settings.module.scss' import { useTranslation } from 'react-i18next'; import { useRouter } from 'next/dist/client/router'; import Link from 'next/link'; import { CommonPropsWrapper } from '../../../models-server/data/props'; export default function SettingsComponent(props: CommonPropsWrapper) { const [ t, i18n ] = useTranslation(); return ( <div className={`${styles.theme1} theme1`}> <div className={styles.settings}> <Link href='/user/settings/account'>アカウント</Link> <Link href='/user/settings/security'>セキュリティ</Link> </div> </div> ) }

なおこのシステムではreCAPTCHAを使っているため、_app.tsxにて以下の設定をおこなっています。

js:_app.tsx

function MyApp({ Component, pageProps }: AppProps) { return ( <GoogleReCaptchaProvider reCaptchaKey={RECAPTCHA_SITE_KEY}> <Component {...pageProps} /> </GoogleReCaptchaProvider> ); }

実現したいこと

SettingsComponent.tsxにあるLinkが正しく動作するようにしたいです。

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

/user/settings/accountにアクセスした状態で「セキュリティ」のリンクをクリックすると/user/settings/securityに遷移するはずですが、以下の2つが発生します。まずToo many re-rendersをなんとかしたいです。

/user/settings/account/user/settings/securityどちらも/user/settings/[tab].tsxを参照するため、router.pathnameは変わりません。このときにrouter.pushしようとすると、自分の環境ではエラーが必ず発生します。

1 of 2 unhandled errors Unhandled Runtime Error Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Call Stack renderWithHooks node_modules\react-dom\cjs\react-dom.development.js (14997:0) updateFunctionComponent node_modules\react-dom\cjs\react-dom.development.js (17356:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (19063:0) HTMLUnknownElement.callCallback node_modules\react-dom\cjs\react-dom.development.js (3945:0) Object.invokeGuardedCallbackDev node_modules\react-dom\cjs\react-dom.development.js (3994:0) invokeGuardedCallback node_modules\react-dom\cjs\react-dom.development.js (4056:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (23964:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (22776:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (22707:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (22670:0) performSyncWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (22293:0) eval node_modules\react-dom\cjs\react-dom.development.js (11327:0) unstable_runWithPriority node_modules\scheduler\cjs\scheduler.development.js (468:0) runWithPriority$1 node_modules\react-dom\cjs\react-dom.development.js (11276:0) flushSyncCallbackQueueImpl node_modules\react-dom\cjs\react-dom.development.js (11322:0) flushSyncCallbackQueue node_modules\react-dom\cjs\react-dom.development.js (11309:0) scheduleUpdateOnFiber node_modules\react-dom\cjs\react-dom.development.js (21893:0) updateContainer node_modules\react-dom\cjs\react-dom.development.js (25482:0) legacyRenderSubtreeIntoContainer node_modules\react-dom\cjs\react-dom.development.js (26037:0) Object.render node_modules\react-dom\cjs\react-dom.development.js (26103:0) renderReactElement node_modules\next\dist\client\index.js (494:21) doRender node_modules\next\dist\client\index.js (801:4) _callee$ node_modules\next\dist\client\index.js (390:18) tryCatch node_modules\next\dist\compiled\regenerator-runtime\runtime.js (45:15) Generator.invoke [as _invoke] node_modules\next\dist\compiled\regenerator-runtime\runtime.js (274:0) prototype.<computed> [as next] node_modules\next\dist\compiled\regenerator-runtime\runtime.js (97:0) asyncGeneratorStep node_modules\next\dist\client\index.js (29:28) _next node_modules\next\dist\client\index.js (47:16) eval node_modules\next\dist\client\index.js (52:12) new Promise <anonymous> eval node_modules\next\dist\client\index.js (44:15) render node_modules\next\dist\client\index.js (381:19) Router.subscription [as sub] node_modules\next\dist\client\index.js (354:47) Router.set node_modules\next\dist\shared\lib\router\router.js (1156:20) _callee$ node_modules\next\dist\shared\lib\router\router.js (861:28) tryCatch node_modules\next\dist\compiled\regenerator-runtime\runtime.js (45:15) Generator.invoke [as _invoke] node_modules\next\dist\compiled\regenerator-runtime\runtime.js (274:0) prototype.<computed> [as next] node_modules\next\dist\compiled\regenerator-runtime\runtime.js (97:0) asyncGeneratorStep node_modules\next\dist\shared\lib\router\router.js (37:28) _next node_modules\next\dist\shared\lib\router\router.js (55:16)
2 of 2 unhandled errors Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'logging') Call Stack Array.<anonymous> https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (246:215) Array.<anonymous> https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (144:497) <unknown> https://www.gstatic.com/recaptcha/releases/CHIHFAf1bjFPOjwwi5Xa4cWR/recaptcha__ja.js (145:404)

補足情報(FW/ツールのバージョンなど)

expressを使っていますが、Next.jsでカスタムサーバーは使用していません。

json:package.json

"dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.2.0", "accept-language": "^3.0.18", "cookie": "^0.4.2", "cookie-parser": "^1.4.5", "express": "^4.17.1", "i18next": "^20.4.0", "next": "^12.2.2", "normalize.css": "^8.0.1", "react": "17.0.2", "react-dom": "17.0.2", "react-google-recaptcha-v3": "^1.10.0", "react-i18next": "^11.11.4", "uuid": "^8.3.2" }, "devDependencies": { "@types/cookie": "^0.4.1", "@types/cookie-parser": "^1.4.2", "@types/express": "^4.17.13", "@types/node": "^16.4.13", "@types/react": "^17.0.16", "@types/react-dom": "^17.0.9", "@types/uuid": "^8.3.1", "eslint": "7.32.0", "eslint-config-next": "11.0.1", "sass": "^1.37.5", "typescript": "^4.3.5" }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

askyq

2022/07/21 05:26

ごめんなさい、正確には以下の2つの場合でエラーが発生します。冒頭の質問文に齟齬があり申し訳ありません。 * 自身のページ(`[tab].tsx`)へアクセスする`Link`タグをクリックした場合 * 自身のページへアクセスするよう`router.push`を実行した場合(今回のソースコードには書いていません) なお`Link`タグが内部で`router.push`または`router.replace`を行うことは`node_modules/next/dist/client/link.js`で確認済です。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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