React页面控制台持续重复打印日志，求助原因

你的代码里useEffect设置了空依赖数组，理论上应该只执行一次getData，但出现无限打印日志的情况，可能由以下几种原因导致：

1. Firebase实例重复初始化 #

检查你的../../components/firebase文件，如果auth或database是每次导入都重新创建的（比如导出时直接调用initializeApp），会导致每次组件渲染时生成新的Firebase实例，可能引发重复请求。

解决方法：在firebase配置文件中只初始化一次App实例，再导出相关服务：

// ../../components/firebase.js 正确示例
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";

const firebaseConfig = { /* 你的Firebase配置 */ };

// 仅初始化一次App实例
const app = initializeApp(firebaseConfig);

// 基于同一个App实例导出服务
export const auth = getAuth(app);
export const database = getDatabase(app);

2. 组件被频繁挂载/卸载 #

如果Dashboard组件被父组件频繁挂载和卸载（比如路由频繁切换、父组件条件渲染逻辑不稳定），会导致useEffect在每次挂载时重新执行，从而重复调用getData。

解决方法：检查父组件的渲染逻辑，避免不必要的组件挂载/卸载操作。比如确保路由切换是稳定的，条件渲染的触发条件不会频繁变化。

3. 意外的重渲染循环 #

虽然你的组件没有使用useState，但如果父组件的状态变化导致Dashboard不断重渲染，且Firebase请求的回调间接触发了父组件的状态更新，会形成循环。

解决方法：

• 用useMemo和useCallback固定dbRef和getData的引用，避免每次渲染生成新的函数/引用，同时明确useEffect的依赖：

import { auth } from "../../components/firebase";
import { database } from "../../components/firebase";
import { ref, child, get } from "firebase/database";
import { useEffect, useMemo, useCallback } from "react";

export default function Dashboard() {
  // 固定dbRef引用，仅当database变化时重新创建
  const dbRef = useMemo(() => ref(database), [database]);

  // 固定getData函数引用，仅当dbRef变化时重新定义
  const getData = useCallback(() => {
    get(child(dbRef, "users/"))
      .then((snapshot) => {
        const data = snapshot.val();
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [dbRef]);

  useEffect(() => {
    getData();
  }, [getData]); // 依赖固定后的getData函数

  return (
    <>
      <div>Properties</div>
    </>
  );
}

• 检查父组件中是否有状态更新会间接触发Dashboard的重渲染，比如不必要的setState调用。

补充：开发环境下的严格模式 #

如果只是看到两次日志（不是无限），那是React严格模式在开发环境下的正常行为——它会执行两次useEffect来检测副作用的稳定性，生产环境中不会出现这种情况。

内容的提问来源于stack exchange，提问作者lams