[英]Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
How do I prevent the following error:如何防止出现以下错误:
Too many re-renders.太多的重新渲染。 React limits the number of renders to prevent an infinite loop.' React 限制了渲染的数量以防止无限循环。
I just changed a class based component to functional component and its not working我刚刚将基于 class 的组件更改为功能组件,但它不起作用
My source code我的源代码
import React, {Fragment, useState} from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './Components/Layout/Navbar';
import Users from './Components/users/Users';
import User from './Components/users/User';
import Search from './Components/users/Search';
import Alert from './Components/Layout/Alert';
import About from './Components/pages/About';
import './App.css';
import Axios from 'axios';
const App = () => {
const [users, setUsers] = useState( [] );
const [user, setUser] = useState( {} );
const [repos, setRepos] = useState( [] );
const [loading, setLoading] = useState( false );
const [alert, setAlert] = useState( null );
// Search Github Users
const searchUsers = async text => {
setLoading(true);
const res = await Axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);
setUsers(res.data.items);
setLoading(false);
};
// GEt single github user
const getUser = async username => {
setLoading(true);
const res = await Axios.get(`https://api.github.com/users/${username}?&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);
setUser(res.data);
setLoading(false);
};
// Get users repos
const getUserRepos = async username => {
setLoading(true);
const res = await Axios.get(`https://api.github.com/users/${username}/repos?per_page=5&sort=created:asc&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`);
setRepos(res.data);
setLoading(false);
};
// Clear users from state
const clearUsers = () =>
setUsers([]);
setLoading(false);
// Set ALert
const showAlert = (msg, type) => {
setAlert({msg, type});
setTimeout(()=> setAlert(null),3000);
};
return (
<Router>
<div className="App">
<Navbar />
<div className="container">
<Alert alert={alert} />
<Switch>
<Route exact path='/' render={props => (
<Fragment>
<Search
searchUsers={searchUsers}
clearUsers={clearUsers}
showClear={ users.length>0? true : false }
setAlert={showAlert}
/>
<Users loading={loading} users={users} />
</Fragment>
)} />
<Route exact path = '/about' component={About} />
<Route exact path= '/user/:login' render={props => (
<User
{...props}
getUser={getUser}
getUserRepos={getUserRepos}
user={user}
repos={repos}
loading={loading} />
)} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;
I just change a class based component to functional component and i get these error.我只是将基于 class 的组件更改为功能组件,我得到了这些错误。
0 0
How do I prevent the following error:如何防止出现以下错误:
Too many re-renders.太多的重新渲染。 React limits the number of renders to prevent an infinite loop.' React 限制了渲染的数量以防止无限循环。
As from the comment,从评论来看,
There was error in the declaration of function clearUsers
function clearUsers
的声明有错误
const clearUsers = () => setUsers([]);
setLoading(false);
which should be.应该是。
const clearUsers = () => {
setUsers([]);
setLoading(false);
}
because of this small typo.因为这个小错字。 The setLoading
function was being called on the first render which would then call setLoading triggering react to call render again and in return call setLoading
and caused the infinite renders. setLoading
function 在第一个渲染上被调用,然后调用 setLoading 触发响应再次调用渲染并返回调用setLoading
并导致无限渲染。
I experienced the same error.我遇到了同样的错误。 I found my problem was having brackets at the end of a function() .我发现我的问题是在function()的末尾有括号。 Yet the function should have been called without brackets.然而 function 应该在没有括号的情况下被调用。 Rookie error.菜鸟错误。
Before:前:
onClick={myFunction()}
After:后:
onClick={myFunction}
If you are using a button also check the caps of your 'onclick'.如果您使用的是按钮,还请检查“ onclick ”的大小写。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.