英文:
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 "./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;
Code for 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;
答案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={()=> viewLogin(false)}
and onClick={()=> 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
<button onClick={viewLogin(false)}>
with
<button onClick={() => viewLogin(false)}>
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 "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">
{/* Use arrow functions or bind() to pass function references */}
<button onClick={() => viewLogin(false)}>Sign up</button>
<button onClick={() => viewLogin(true)}>Login</button>
</div>
</div>
</div>
);
};
export default Auth;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论