Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл - PullRequest
Новая
       132

Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

0 голосов
/ 30 мая 2020

Как предотвратить следующую ошибку:

Слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop. '

Я только что изменил компонент на основе класса на функциональный компонент, и он не работает

Мой исходный код 

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

Как предотвратить следующую ошибку:

Too many re -рендеры. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop. '

1 Ответ

1 голос
/ 30 мая 2020

Как видно из комментария,

Произошла ошибка в объявлении функции clearUsers

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

, которая должна быть. 

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

из-за этого небольшая опечатка. Функция setLoading вызывалась при первом рендеринге, который затем вызывал триггер setLoading, реагируя на повторный вызов рендеринга и в ответном вызове setLoading, что приводило к бесконечному рендерингу.

...