错误：重新渲染过多。 React 限制渲染次数以防止无限循环答案

【问题标题】：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop错误：重新渲染过多。 React 限制渲染次数以防止无限循环
【发布时间】：2020-09-17 18:49:44
【问题描述】：

如何防止出现以下错误：

重新渲染过多。 React 限制了渲染的数量以防止无限循环。'

我刚刚将基于类的组件更改为功能组件，但它不起作用

我的源代码

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;

我只是将基于类的组件更改为功能组件，然后出现这些错误。

如何防止出现以下错误：

重新渲染过多。 React 限制了渲染的数量以防止无限循环。'

【问题讨论】：

据我所见，我认为您的本意是 const clearUsers = () => { setUsers([]); setLoading(false); }。因为setLoading 在 clearUsers 声明之外，所以 setLoading() 触发渲染，触发 setLoading 等等。
接受我的回答：D 如果它对你有用@pukar。祝你好运

标签： javascript reactjs react-hooks use-effect use-state

【解决方案1】：

从评论来看，

函数clearUsers的声明有错误

 const clearUsers = () => setUsers([]);
 setLoading(false);

应该是这样的。

 const clearUsers = () => { 
   setUsers([]);
   setLoading(false);
 }

因为这个小错字。 setLoading 函数在第一次渲染时被调用，然后调用 setLoading 触发响应再次调用渲染，并在返回调用 setLoading 并导致无限渲染。

【讨论】：

【解决方案2】：

我遇到了同样的错误。我发现我的问题是 function() 末尾有括号。然而，该函数应该在没有括号的情况下调用。菜鸟错误。

之前：

onClick={myFunction()}

之后：

onClick={myFunction}

如果您使用的是按钮，还请检查“onclick”的caps。

【讨论】：