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

Question

Я пытаюсь создать зарегистрированный сеанс (когда пользователь обновляет браузер) подключиться к базе данных Firebase в реальном времени.

Это работает, но я продолжаю получать эту ошибку.

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

My app.js

import React from 'react';

import { UserProvider } from './model/UserContext'


function App() {

  return (
    <div>
      <UserProvider>
      <Session />
       <NavBar />
        <Container maxWidth="sm">
         <Router>
         <Route path='/Login' component={Login}  />
         <Route path='/Dashboard' component={Dashboard}  />
         </Router>
       </Container>
      </UserProvider>
    </div>
  );
}

export default App;

My UserContext.js

import React, { useState, createContext } from 'react'
import Firebase from 'firebase'

export const UserContext = createContext();

//export const UserProvider = UserContext.Provider
//export const UserConsumer = UserContext.Consumer
// export default UserContext

export const UserProvider = props => {
  const[user, setUser] = useState(
    {
      username:"blank",
      loggendIn: false
    }
  );


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);

  if(id != null){
    console.log('id is there');
    // load user from realtime database
    const dbOBJ = Firebase.database().ref().child("users").child(id);

    dbOBJ.on('value', function(snapshot){
      setUser(snapshot.val());
    });

  }else{
    console.log('no id :( ');
  }



  return(
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    < /UserContext.Provider>
  );
}

Answer 1

Я бы сказал, используйте крюк useState.

Your UserContext.js

import React, { useState, createContext, useEffect } from 'react'
import Firebase from 'firebase'

export const UserContext = createContext();

//export const UserProvider = UserContext.Provider
//export const UserConsumer = UserContext.Consumer
// export default UserContext

export const UserProvider = props => {
  const[user, setUser] = useState(
    {
      username:"blank",
      loggendIn: false
    }
  );


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);
useEffect(() => {
  if(id != null){
    console.log('id is there');
    // load user from realtime database
    const dbOBJ = Firebase.database().ref().child("users").child(id);

    dbOBJ.on('value', function(snapshot){
      setUser(snapshot.val());
    });

  }else{
    console.log('no id :( ');
  }
},[id]) // <==== this will call useEffect again if your id changes



  return(
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    < /UserContext.Provider>
  );
}

Причина, по которой эта ошибка возникла, потому что ваше условие выполнено, и вы вызвали setState, что вызвало повторную визуализацию, и это произошло снова, что привело к бесконечному циклу.