从Firebase获取路由时useEffect无限循环致应用卡顿，如何解决？

你的代码核心问题是无限渲染循环+不合理的数据库监听逻辑，导致控制台高频报错、应用卡顿，具体原因和修复方案如下：

问题点拆解 #

1. 普通变量作为useEffect依赖引发无限循环
   你用var array1 = []声明的是普通变量，不是React状态，每次组件渲染时这个变量都会被重新初始化，而且作为useEffect的依赖，React会认为它每次都在变化，导致useEffect反复执行，触发无限渲染循环。
2. 异步数据处理逻辑错误
   onValue的回调是异步执行的，你在useEffect里直接调用setArray2(newArray)时，array1还没被填充数据，导致初始状态为空；之后回调执行修改array1，但因为array1不是状态，组件不会自动更新，直到useEffect再次执行，形成恶性循环。
3. 未清理数据库监听
   onValue会持续监听数据库变化，每次useEffect执行都会创建新的监听，旧的监听没被清理，导致内存泄漏和重复触发回调，进一步加剧性能问题。
4. 路由顺序错误
   NotFound路由（path="/*"）放在了动态路由前面，会先匹配到所有未定义的路由，导致用户的动态profile路由无法访问。

修复后的代码 #

import { onValue, ref } from "firebase/database";
import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import "../App.css";
import Changepassword from "../Changepassword";
import Editprofile from "../Editprofile";
import Explore from "../Explore";
import { database } from "../firebase";
import ForgotPassword from "../ForgotPassword";
import Home from "../Home";
import Login from "../Login";
import NotFound from "../NotFound";
import SignUp from "../SignUp";
import ViewingProfile from "../ViewingProfile";

function App() {
  const [userNames, setUserNames] = useState([]);

  useEffect(() => {
    const usersRef = ref(database, "/users/");
    // 订阅数据库变化，同时获取取消订阅的函数
    const unsubscribe = onValue(usersRef, (snapshot) => {
      if (!snapshot.exists()) {
        setUserNames([]);
        return;
      }
      // 直接从快照提取用户名数组
      const users = Object.values(snapshot.val());
      const names = users.map(user => user.username);
      setUserNames(names);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/edit-profile" element={<Editprofile />} />
      <Route path="/change-password" element={<Changepassword />} />
      <Route path="/explore" element={<Explore />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />
      {/* 动态生成用户路由，必须加key属性避免React警告 */}
      {userNames.map((name) => (
        <Route 
          key={name}
          path={`/${name}`} 
          element={<ViewingProfile name={name} />} 
        />
      ))}
      {/* 把NotFound路由放在最后，避免覆盖其他合法路由 */}
      <Route path="/*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

关键修改说明 #

• 用状态管理用户数据：去掉普通变量array1，直接用userNames状态存储用户名，确保数据变化时组件能正确更新。
• 单次监听+自动清理：useEffect用空依赖数组，只在组件挂载时创建一次数据库监听；返回unsubscribe函数，组件卸载时自动取消监听，避免内存泄漏。
• 异步逻辑内直接更新状态：在onValue的回调里直接处理快照数据并更新状态，保证数据的实时性和正确性。
• 修正路由顺序：把NotFound路由移到最后，确保动态用户路由能被优先匹配。
• 添加路由key：给动态生成的Route加key属性，解决React列表渲染的警告。

关于屏蔽报错的建议 #

不建议直接屏蔽报错，因为报错是在提示代码的逻辑问题，强行屏蔽会隐藏潜在风险。修复上述逻辑后，高频报错和性能问题都会自然解决。如果确实遇到特定无法立即修复的报错，可以用React的ErrorBoundary组件包裹路由部分，但这只是临时方案，优先建议修复代码逻辑。

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