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

Question

如何防止以下错误：

太多的重新渲染。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;

我只是将一个基于类的组件更改为功能组件，我得到了这些错误。

0个

如何防止以下错误：

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

Answer 1

我也经历了同样的错误。我发现我的问题是在函数（）的末尾有括号。然而，调用该函数时不应使用括号。新手失误。

之前：

onClick={myFunction（）}

之后：

onClick={myFunction}

如果您正在使用按钮，请检查“onclick”的大写字母。

Answer 2

从评论来看,，

在声明函数clearUser时出错。

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

应该是。

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

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