最大更新深度超出。没有使用useState或useEffect。

huangapple go评论76阅读模式
英文:

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 &quot;./App.css&quot;;
import Nav from &quot;./Comp/Nav&quot;;
import { BrowserRouter as Router } from &quot;react-router-dom&quot;;
import RouterPaths from &quot;./Comp/Routes/RouterPaths&quot;;

function App() {
  return (
    &lt;Router&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;Nav /&gt;
        &lt;RouterPaths /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
}

export default App;

Routers.js

import React from &quot;react&quot;;
import { Routes, Route, useLocation, Navigate } from &quot;react-router-dom&quot;;
import Clone from &quot;../Pages/Clone&quot;;
import data from &quot;../../PageData&quot;;

export default function RouterPath() {
  let location = useLocation();
  return (
    &lt;div className=&quot;lg:pt-12&quot;&gt;
      &lt;Routes location={location} key={location.pathname}&gt;
        &lt;Route path=&quot;/&quot; element={&lt;Navigate replace to=&quot;/&quot; /&gt;} /&gt;
        {data.NavLinks.map((items, index) =&gt; {
          return &lt;Route exact path={items.Link} element={&lt;Clone test={items.Name} /&gt;}&gt;&lt;/Route&gt;;
        })}
      &lt;/Routes&gt;
    &lt;/div&gt;
  );
}

Nav.js

import React from &quot;react&quot;;
import { Link } from &quot;react-router-dom&quot;;
import data from &quot;../PageData&quot;;

export default function Nav() {
  return (
    &lt;div className=&quot;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&quot;&gt;
      {data.NavLinks.map((item, index) =&gt; {
        return (
          &lt;div className=&quot;-rotate-90 lg:rotate-0 w-24&quot; key={index}&gt;
            &lt;Link to={item.Link} className=&quot;NavListItemLink&quot;&gt;
              {item.Name}
            &lt;/Link&gt;
          &lt;/div&gt;
        );
      })}
    &lt;/div&gt;
  );
}

Clone.js

import React from &quot;react&quot;;

export default function Clone({ test }) {
  return &lt;div&gt;{test} asdf&lt;/div&gt;;
}

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 组件在从主页 &quot;/&quot; 路由路径无条件地渲染到自身。

<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 &quot;/&quot; route path to itself.

&lt;Route path=&quot;/&quot; element={&lt;Navigate replace to=&quot;/&quot; /&gt;} /&gt;

This is the render loop. You should not redirect a path to itself. Remove this route.

export default function RouterPath() {
  let location = useLocation();
  return (
    &lt;div className=&quot;lg:pt-12&quot;&gt;
      &lt;Routes location={location} key={location.pathname}&gt;
        {data.NavLinks.map((items) =&gt; (
          &lt;Route
            key={items.Link}
            path={items.Link}
            element={&lt;Clone test={items.Name} /&gt;}
          /&gt;
        ))}
      &lt;/Routes&gt;
    &lt;/div&gt;
  );
}

If you are looking for a "catch-all" route then render a redirect to &lt;Route path=&quot;*&quot; element={&lt;Navigate replace to=&quot;/&quot; /&gt;} /&gt; and ensure you are still rendering a required component on &quot;/&quot;.

Example:

export default function RouterPath() {
  let location = useLocation();
  return (
    &lt;div className=&quot;lg:pt-12&quot;&gt;
      &lt;Routes location={location} key={location.pathname}&gt;
        {data.NavLinks.map((items) =&gt; (
          &lt;Route
            key={items.Link}
            path={items.Link}
            element={&lt;Clone test={items.Name} /&gt;}
          /&gt;
        ))}
        &lt;Route path=&quot;/&quot; element={&lt;HomePage /&gt;} /&gt; // &lt;-- you may need to create this component
        &lt;Route path=&quot;*&quot; element={&lt;Navigate replace to=&quot;/&quot; /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/div&gt;
  );
}

huangapple
  • 本文由 发表于 2023年1月9日 06:27:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75051707.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定