如何在用户登录/打开应用时仅调用一次指定函数？

核心问题分析 #

你的代码存在几个关键问题：

• Hook调用违规：useState不能在普通函数Read内部调用，React要求Hook只能在组件顶层或自定义Hook中使用。
• 异步更新未处理：setCounter是异步操作，useEffect里直接打印counter会拿到初始值，无法获取最新的数据库数据。
• 未判断登录状态：当前代码会在组件挂载时直接调用Read，没有区分用户是否已登录。

修复后的代码实现 #

// 把counter的状态声明在组件顶层，而非Read函数内
const [counter, setCounter] = useState(1);

useEffect(() => {
  // 先判断用户是否已登录（假设user是登录状态的全局/上下文变量）
  if (!user?.localId) return;

  const starCountRef = ref(db, 'users/' + user.localId);
  // 订阅数据库变化，同时保存 unsubscribe 函数用于组件卸载时清理
  const unsubscribe = onValue(starCountRef, (snapshot) => {
    const data = snapshot.val();
    // 处理数据可能为空的情况，避免报错
    setCounter(data?.countTrains || 1);
    console.log('最新counter值:', data?.countTrains || 1);
  });

  // 组件卸载时取消订阅，防止内存泄漏
  return () => unsubscribe();
}, [user?.localId]); // 依赖项设为user.localId，仅当用户登录状态变化（从无到有）时执行

// 单独监听counter变化来打印更新后的值
useEffect(() => {
  console.log('counter更新:', counter);
}, [counter]);

关键优化点 #

• 合规使用Hook：将useState移到组件顶层，符合React Hook的调用规则。
• 登录状态判断：通过if (!user?.localId)跳过未登录时的数据库请求，确保仅在用户登录后执行读取操作。
• 清理订阅：保存onValue返回的取消订阅函数，在组件卸载时执行，避免内存泄漏。
• 异步更新处理：要么在订阅回调里直接打印最新数据，要么用单独的useEffect监听counter变化来获取更新后的值。
• 数据容错：添加data?.countTrains || 1处理数据库数据为空的情况，避免undefined赋值给counter。

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