React应用 – 重新渲染次数过多。React限制渲染次数以防止无限循环。

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

React app - Too many re-renders. React limits the number of renders to prevent an infinite loop

问题

以下是您要翻译的内容:

App.js 代码部分

import "./App.css";
import SideBar from "./components/Sidebar/SideBar";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Dashboard from "./pages/Dashboard";
import Report1 from "./pages/Report1";
import Report2 from "./pages/Report2";
import Auth from "./components/Auth";
import { useState, useEffect } from "react";

function App() {
  const authToken = false;
  return (
    <div>
      {!authToken && <Auth />}
      {authToken && (
        <Router>
          <SideBar>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/Report1" element={<Report1 />} />
              <Route path="/Report2" element={<Report2 />} />
              <Route path="*" element={<> not found</>} />
            </Routes>
          </SideBar>
        </Router>
      )}
    </div>
  );
}

export default App;

Auth.js 代码部分

import { useState } from "react";

const Auth = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [error, setError] = useState();

  const viewLogin = (status) => {
    setError(null);
    setIsLogin(status);
  };

  return (
    <div className="auth-container">
      <div className="auth-container-box">
        <form>
          <h2>{isLogin ? "Please log in" : "Please sign up"}</h2>
          <input type="email" placeholder="email" />
          <input type="password" placeholder="password" />

          {!isLogin && <input type="password" placeholder="confirm pass" />}
          <input type="submit" className="create" />
          {error && <p>{error}</p>}
        </form>

        <div className="auth-options">
          <button onClick={() => viewLogin(false)}>
            Sign up
          </button>
          <button onClick={() => viewLogin(true)}>
            Login
          </button>
        </div>
      </div>
    </div>
  );
};

export default Auth;

请注意,以上是您提供的代码的翻译部分,没有包含问题的回答。如果您有其他翻译需求,请随时提出。

英文:

I am trying to get an authentication in place for a react app that I am building.. Given below is the code I have for my App.js and Auth.js files

When I load my app it says

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Can someone assist on where I could be going wrong here, thanks

Code for App.js

import &quot;./App.css&quot;;
import SideBar from &quot;./components/Sidebar/SideBar&quot;;
import { BrowserRouter as Router, Route, Routes } from &quot;react-router-dom&quot;;

import Dashboard from &quot;./pages/Dashboard&quot;;
import Report1 from &quot;./pages/Report1&quot;;
import Report2 from &quot;./pages/Report2&quot;;
import Auth from &quot;./components/Auth&quot;;
import { useState, useEffect } from &quot;react&quot;;



function App() {
  const authToken = false;
  return (
    &lt;div&gt;
      {!authToken &amp;&amp; &lt;Auth /&gt;}
      {authToken &amp;&amp; (
      &lt;Router&gt;
      &lt;SideBar&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Dashboard /&gt;} /&gt;
          &lt;Route path=&quot;/Report1&quot; element={&lt;Report1 /&gt;} /&gt;
          &lt;Route path=&quot;/Report2&quot; element={&lt;Report2 /&gt;} /&gt;
          &lt;Route path=&quot;*&quot; element={&lt;&gt; not found&lt;/&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/SideBar&gt;
    &lt;/Router&gt;
  )}
&lt;/div&gt;
 );
}

export default App;

Code for Auth.js

import { useState } from &quot;react&quot;;

const Auth = () =&gt; {
  const [isLogin, setIsLogin] = useState(true);
  const [error, setError] = useState();

  const viewLogin = (status) =&gt; {
  setError(null);
  setIsLogin(status);
  };

  return (
    &lt;div className=&quot;auth-container&quot;&gt;
      &lt;div className=&quot;auth-container-box&quot;&gt;
        &lt;form&gt;
          &lt;h2&gt;{isLogin ? &quot;Please log in&quot; : &quot;Please sign up&quot;}&lt;/h2&gt;
          &lt;input type=&quot;email&quot; placeholder=&quot;email&quot; /&gt;
          &lt;input type=&quot;password&quot; placeholder=&quot;password&quot; /&gt;

          {!isLogin &amp;&amp; &lt;input type=&quot;password&quot; placeholder=&quot;confirm pass&quot; /&gt;}
          &lt;input type=&quot;submit&quot; className=&quot;create&quot; /&gt;
          {error &amp;&amp; &lt;p&gt;{error}&lt;/p&gt;}
        &lt;/form&gt;

        &lt;div className=&quot;auth-options&quot;&gt;
          &lt;button
            onClick={viewLogin(false)}
          &gt;
            Sign up
          &lt;/button&gt;
          &lt;button
            onClick={viewLogin(true)}
          &gt;
            Login
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Auth;

答案1

得分: 2

这两个是问题的根本原因:

onClick={viewLogin(false)} onClick={viewLogin(true)}

我假设你编写这段代码时是按照在普通HTML中的工作方式来思考的。然而,这是JSX,写成 onClick={funcName()} 会在组件渲染时立即调用该函数。我们要做的是提供一个在 onClick 事件发生时稍后才会被调用的函数。

简单的修复方法是:
onClick={() => viewLogin(false)} onClick={() => viewLogin(true)}

英文:

These 2 are the culprit:

onClick={viewLogin(false)} and onClick={viewLogin(true)}

I'm assuming you wrote this thinking how it works in normal HTML. However, this is JSX and writing onClick={funcName()} will actually call the function right then when the component renders. What we want to do is give it a function that will be called later when the onClick event happens.

The simple fix:
onClick={()=&gt; viewLogin(false)} and onClick={()=&gt; viewLogin(true)}

答案2

得分: 1

你直接在按钮中调用了函数,这将导致在渲染阶段进行新的渲染。

你应该将

<button onClick={viewLogin(false)}>

替换为

<button onClick={() => viewLogin(false)}>

这样,你将一个真正的函数传递给按钮,在点击时执行,而不是立即执行。

英文:

You directly called the functions in your buttons, which will lead to new renders during the rendering phase.

You should switch

&lt;button onClick={viewLogin(false)}&gt;

with

&lt;button onClick={() =&gt; viewLogin(false)}&gt;

This way you pass an actual function to the button which will be executed on click and not right away.

答案3

得分: 1

在你的Auth.js组件中,引起“Too many re-renders”错误的问题在于按钮的onClick处理程序。在使用onClick处理程序时,你应该传递函数引用,但在你的代码中,你直接调用了这些函数,这导致了无限的重新渲染。

已更正的Auth.js代码:

import { useState } from "react";

const Auth = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [error, setError] = useState();

  const viewLogin = (status) => {
    setError(null);
    setIsLogin(status);
  };

  return (
    <div className="auth-container">
      <div className="auth-container-box">
        <form>
          <h2>{isLogin ? "Please log in" : "Please sign up"}</h2>
          <input type="email" placeholder="email" />
          <input type="password" placeholder="password" />

          {!isLogin && <input type="password" placeholder="confirm pass" />}
          <input type="submit" className="create" />
          {error && <p>{error}</p>}
        </form>

        <div className="auth-options">
          {/* 使用箭头函数或bind()来传递函数引用 */}
          <button onClick={() => viewLogin(false)}>Sign up</button>
          <button onClick={() => viewLogin(true)}>Login</button>
        </div>
      </div>
    </div>
  );
};

export default Auth;

希望这能帮助你解决问题。

英文:

The issue causing the "Too many re-renders" error is in the onClick handlers of the buttons in your Auth.js component. When using onClick handlers, you should pass a function reference, but in your code, you are directly invoking the functions, which causes an infinite loop of re-renders.

Corrected code for Auth.js:

import { useState } from &quot;react&quot;;

const Auth = () =&gt; {
  const [isLogin, setIsLogin] = useState(true);
  const [error, setError] = useState();

  const viewLogin = (status) =&gt; {
    setError(null);
    setIsLogin(status);
  };

  return (
    &lt;div className=&quot;auth-container&quot;&gt;
      &lt;div className=&quot;auth-container-box&quot;&gt;
        &lt;form&gt;
          &lt;h2&gt;{isLogin ? &quot;Please log in&quot; : &quot;Please sign up&quot;}&lt;/h2&gt;
          &lt;input type=&quot;email&quot; placeholder=&quot;email&quot; /&gt;
          &lt;input type=&quot;password&quot; placeholder=&quot;password&quot; /&gt;

          {!isLogin &amp;&amp; &lt;input type=&quot;password&quot; placeholder=&quot;confirm pass&quot; /&gt;}
          &lt;input type=&quot;submit&quot; className=&quot;create&quot; /&gt;
          {error &amp;&amp; &lt;p&gt;{error}&lt;/p&gt;}
        &lt;/form&gt;

        &lt;div className=&quot;auth-options&quot;&gt;
          {/* Use arrow functions or bind() to pass function references */}
          &lt;button onClick={() =&gt; viewLogin(false)}&gt;Sign up&lt;/button&gt;
          &lt;button onClick={() =&gt; viewLogin(true)}&gt;Login&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Auth;

huangapple
  • 本文由 发表于 2023年7月20日 13:16:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726861.html
匿名

发表评论

匿名网友

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

确定