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

Question

我在尝试创建一个已登录的会话（当用户刷新浏览器时）以连接到Firebase实时数据库。

它正在工作，但我一直收到这个错误。

“重新渲染次数过多。React限制渲染次数以防止无限循环。”

我的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;

我的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>
  );
}

- Chris Evans

---

这是因为您正在尝试在函数组件内连接到数据库。当您尝试连接到后端时，应该使用 useEffect() 钩子。请注意，在函数组件内不能直接连接数据库。 - Hbarna

感谢您的回复，我已将代码更改为以下内容：dbOBJ.on('value', function(snapshot){ useEffect(() => { setUser(snapshot.val()); }, []); });现在出现了以下错误： React Hook “useEffect”不能在回调函数中调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。 - Chris Evans

抱歉，我需要在 if 语句之外添加它。现在它可以工作了。 - Chris Evans

感谢大家的帮助。 - Chris Evans

Answer 1

我会建议使用 useState 钩子。

你的 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导致重新渲染，并再次发生，从而导致无限循环。

- Atin Singh