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

根据评论，

函数clearUsers的声明有误

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

应该是。

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

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

Answer 2

我遇到了同样的错误。我发现我的问题是在 function（）的结尾处有括号。然而，该函数应该在没有括号的情况下被调用。新秀错误。

之前：

onClick={myFunction()}

之后：

onClick={myFunction}

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

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

2 个答案: