重新渲染过多.React限制渲染次数，以防止出现无限循环.下一个js错误

Question

有人能解决这个问题吗？如果我去掉"/"在about和id之前，它不抛出任何错误smh。

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);
}
}

Answer 1

这是react的基本概念，即每当状态发生变化时，组件都会重新渲染。当组件重新渲染时，它会再次改变状态，所以这种情况一直持续到无穷大。您将不得不应用基于params值仅渲染一次的技术。正如其他答案所提到的那样。

Answer 2

您可能希望将代码放入这样的useEffect中，并使用nextJS中的router实例来获取pathName。

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])