如何解决重新渲染次数过多的问题。React限制渲染次数以防止无限循环

Question

我是新来反应的，最近我遇到了这个问题，我不知道如何解决它。它说重新渲染太多。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

请帮我解决一下，谢谢。

Answer 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>。

我希望它有帮助