渲染次数过多。React 为了防止无限循环，限制了渲染次数。Next.js 错误。

Question

有人能解决一下这个问题吗？如果我把“about”和“id”前面的“/”删除，就不会报错，真是让人头疼。

import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useState } from "react";

function MyApp({ Component, pageProps }) {
  const [navbar, Setnavbar] = useState(0);
  if (process.browser) {
    let params = window.location.pathname;  
    console.log(params);
    if (params == "/about") {
      Setnavbar(0);
         }
    else if (params == `/id/portal`) {
      Setnavbar(1);
     }
 }

- Doma

Answer 1

这是React的基本概念，每当状态改变时，组件都会重新渲染。当组件重新渲染时，它又会改变状态，这样无限循环下去。您需要应用技巧，根据参数值只渲染一次。正如其他答案所提到的那样。

- Ranu Vijay

Answer 2

可能你想把你的代码放在useEffect里面，像这样使用nextJS的路由实例来获取路径名。

    import Navbar from "../components/Navbar";
    import Footer from "../components/Footer";
    import { useState,useEffech } from "react";
    import { useRouter } from 'next/router';

    function MyApp({ Component, pageProps }) {
      const [navbar, Setnavbar] = useState(0);
        const router = useRouter()
       const params= router.pathname

      useEffect(()=>{
        if (process.browser) {
        if (params == "/about") {
          Setnavbar(0);
             }
        else if (params == `/id/portal`) {
          Setnavbar(1);
         }
     }
 },[params])
  

- Abdul Kàbéèr