如何修复太多的重新渲染。 React 限制渲染次数以防止无限循环答案

【问题标题】：How to fix Too many re-renders. React limits the number of renders to prevent an infinite loop如何修复太多的重新渲染。 React 限制渲染次数以防止无限循环
【发布时间】：2021-03-15 08:22:12
【问题描述】：

我是新手，最近我遇到了这个问题，我不知道如何解决它。它说重新渲染太多。 React 限制了渲染的数量以防止无限循环。它是如何无限循环的？是因为 on("value") 吗？

import React from "react";
import fire from "./firebase";
import firebase from "firebase"
import { useState } from "react"

    
const UserPage = ({ match }) => {
    const [user, setUser] = useState(null)
    const { params: { userId } } = match;
    var userName;
    console.log(userId)
    firebase.database().ref("users/"+userId+"/praivate/login credentials").on("value", (snapshot)=>{
        setUser(snapshot.val().userName)
    })
    
    return(
        <>
        <h1>Hey {user}</h1>
        </>
    )
    }
   
export default UserPage

请帮我解决它，谢谢。

【问题讨论】：

每次setUser，组件都会重新渲染...导致firebase调用再次发生...导致setUser被调用。使用 useEffect(()=>doFirebaseCall(), []) 结束您的 firebase 通话。

标签： javascript reactjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

您应该在生命周期方法中处理您的 Firebase 员工。当您使用功能组件时，您可以使用 useEffect hook：

import React from "react";
import fire from "./firebase";
import firebase from "firebase"
import { useState } from "react"

    
const UserPage = ({ match }) => {
    const [user, setUser] = useState(null)
    const { params: { userId } } = match;

    useEffect(()=>{
        //Put your Firebase staff here
     },[])
    
    return(
        <>
        <h1>Hey {user}</h1>
        </>
    )
    }
   
export default UserPage

我不知道你想要实现什么，但在你的内心<h1>{user}</h1> 我认为{user} 是一个object 所以如果你想访问一个特定的属性你可以做类似<h1>{user.attributeName}</h1> 的事情。

希望对你有帮助

【讨论】：

我真的应该停止在 cmets 中提供答案；）