英文:
Maximum update depth exceeded. No useState or useEffect
问题
无法解决这个问题。导航链接和路由链接从JSON数据中提取为映射。
错误:
警告:最大更新深度超过限制。这可能发生在组件在useEffect内部调用setState时,但useEffect要么没有依赖项数组,要么其中一个依赖项在每次渲染时都发生更改。
无法确定是什么导致了重新渲染。
App.js
import "./App.css";
import Nav from "./Comp/Nav";
import { BrowserRouter as Router } from "react-router-dom";
import RouterPaths from "./Comp/Routes/RouterPaths";
function App() {
return (
<Router>
<div className="App">
<Nav />
<RouterPaths />
</div>
</Router>
);
}
export default App;
Routers.js
import React from "react";
import { Routes, Route, useLocation, Navigate } from "react-router-dom";
import Clone from "../Pages/Clone";
import data from "../../PageData";
export default function RouterPath() {
let location = useLocation();
return (
<div className="lg:pt-12">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Navigate replace to="/" />} />
{data.NavLinks.map((items, index) => {
return <Route exact path={items.Link} element={<Clone test={items.Name} />} key={index} />;
})}
</Routes>
</div>
);
}
Nav.js
import React from "react";
import { Link } from "react-router-dom";
import data from "../PageData";
export default function Nav() {
return (
<div className="fixed w-12 h-screen flex flex-col gap-8 justify-between items-center py-20 bg-teal-800 lg:flex-row lg:gap-4 lg:h-12 lg:w-screen lg:px-20 lg:py-0">
{data.NavLinks.map((item, index) => {
return (
<div className="-rotate-90 lg:rotate-0 w-24" key={index}>
<Link to={item.Link} className="NavListItemLink">
{item.Name}
</Link>
</div>
);
})}
</div>
);
}
Clone.js
import React from "react";
export default function Clone({ test }) {
return <div>{test} asdf</div>;
}
一切似乎都放在正确的位置。我只是卡在这个问题上。我尝试删除JSON依赖项,但问题依然存在。尝试删除.map()
函数,但问题也依然存在。
英文:
Can't figure this one out. Nav Links and Router Links are pulled from JSON data as a map.
Error:
> Warning: Maximum update depth exceeded. This can happen when a
> component calls setState inside useEffect, but useEffect either
> doesn't have a dependency array, or one of the dependencies changes on
> every render.
Can't figure out what is causing the re-render.
App.js
import "./App.css";
import Nav from "./Comp/Nav";
import { BrowserRouter as Router } from "react-router-dom";
import RouterPaths from "./Comp/Routes/RouterPaths";
function App() {
return (
<Router>
<div className="App">
<Nav />
<RouterPaths />
</div>
</Router>
);
}
export default App;
Routers.js
import React from "react";
import { Routes, Route, useLocation, Navigate } from "react-router-dom";
import Clone from "../Pages/Clone";
import data from "../../PageData";
export default function RouterPath() {
let location = useLocation();
return (
<div className="lg:pt-12">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Navigate replace to="/" />} />
{data.NavLinks.map((items, index) => {
return <Route exact path={items.Link} element={<Clone test={items.Name} />}></Route>;
})}
</Routes>
</div>
);
}
Nav.js
import React from "react";
import { Link } from "react-router-dom";
import data from "../PageData";
export default function Nav() {
return (
<div className="fixed w-12 h-screen flex flex-col gap-8 justify-between items-center py-20 bg-teal-800 lg:flex-row lg:gap-4 lg:h-12 lg:w-screen lg:px-20 lg:py-0">
{data.NavLinks.map((item, index) => {
return (
<div className="-rotate-90 lg:rotate-0 w-24" key={index}>
<Link to={item.Link} className="NavListItemLink">
{item.Name}
</Link>
</div>
);
})}
</div>
);
}
Clone.js
import React from "react";
export default function Clone({ test }) {
return <div>{test} asdf</div>;
}
Everything seems to be in the right place. I am just stuck with this issue. I've tried removing JSON dependency, same issue. Tried removing .map()
function, same issue.
答案1
得分: 1
The RouterPath
组件在从主页 "/"
路由路径无条件地渲染到自身。
<Route path="/ " element={<Navigate replace to="/ " />} />;
这是渲染循环。不应将路径重定向到自身。请删除此路由。
如果您正在寻找一个“捕获所有”路由,然后渲染一个重定向到 <Route path="*" element={<Navigate replace to="/" />} />
,并确保您仍然在“/”上渲染所需的组件。
示例:
export default function RouterPath() {
let location = useLocation();
return (
<div className="lg:pt-12">
<Routes location={location} key={location.pathname}>
{data.NavLinks.map((items) => (
<Route
key={items.Link}
path={items.Link}
element={<Clone test={items.Name} />}
/>
))}
<Route path="/" element={<HomePage />} /> // <-- 您可能需要创建此组件
<Route path="*" element={<Navigate replace to="/" />} />
</Routes>
</div>
);
}
英文:
The RouterPath
component is unconditionally rendering from the home "/"
route path to itself.
<Route path="/" element={<Navigate replace to="/" />} />
This is the render loop. You should not redirect a path to itself. Remove this route.
export default function RouterPath() {
let location = useLocation();
return (
<div className="lg:pt-12">
<Routes location={location} key={location.pathname}>
{data.NavLinks.map((items) => (
<Route
key={items.Link}
path={items.Link}
element={<Clone test={items.Name} />}
/>
))}
</Routes>
</div>
);
}
If you are looking for a "catch-all" route then render a redirect to <Route path="*" element={<Navigate replace to="/" />} />
and ensure you are still rendering a required component on "/"
.
Example:
export default function RouterPath() {
let location = useLocation();
return (
<div className="lg:pt-12">
<Routes location={location} key={location.pathname}>
{data.NavLinks.map((items) => (
<Route
key={items.Link}
path={items.Link}
element={<Clone test={items.Name} />}
/>
))}
<Route path="/" element={<HomePage />} /> // <-- you may need to create this component
<Route path="*" element={<Navigate replace to="/" />} />
</Routes>
</div>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论