React Native中如何单次读取Firebase数据库数据避免重复渲染？

错误原因 #

你直接在组件顶层调用Read()函数，每次组件渲染都会执行这个函数。而onValue是Firebase的实时监听方法，一旦数据变化就会调用setNumberTrains，触发组件重新渲染——这就形成了无限循环，导致React抛出「Too many re-renders」异常。

两种实现单次读取的方案 #

方案一：使用get()方法单次拉取数据 #

get()是Firebase提供的单次读取数据的API，不会持续监听变化，配合useEffect可以确保只执行一次读取：

import { useState, useEffect } from 'react';
import { ref, get } from 'firebase/database';

const YourComponent = () => {
  const [numberTrains, setNumberTrains] = useState(0);

  useEffect(() => {
    // 用async/await处理异步读取
    const fetchTrainCount = async () => {
      const userRef = ref(db, `users/${user.localId}`);
      const snapshot = await get(userRef);
      if (snapshot.exists()) {
        const data = snapshot.val();
        setNumberTrains(data.countTrains);
      }
    };

    fetchTrainCount();
  }, [user.localId]); // 仅当user.localId变化时重新执行，避免不必要的读取

  console.log(numberTrains);
  return <>{/* 你的组件内容 */}</>;
};

方案二：用onValue监听后立即取消订阅 #

如果需要临时监听一次数据（比如确保拿到最新值），可以在读取完成后手动取消onValue的订阅：

import { useState, useEffect } from 'react';
import { ref, onValue } from 'firebase/database';

const YourComponent = () => {
  const [numberTrains, setNumberTrains] = useState(0);

  useEffect(() => {
    const userRef = ref(db, `users/${user.localId}`);
    // 订阅数据变化
    const unsubscribe = onValue(userRef, (snapshot) => {
      const data = snapshot.val();
      setNumberTrains(data.countTrains);
      // 读取一次后立即取消订阅，停止监听
      unsubscribe();
    });

    // 组件卸载时自动取消订阅，防止内存泄漏
    return unsubscribe;
  }, [user.localId]);

  console.log(numberTrains);
  return <>{/* 你的组件内容 */}</>;
};

关键说明 #

• useEffect的第二个参数（依赖数组）是核心：空数组[]表示只在组件挂载时执行一次；如果user.localId可能变化，把它加入依赖数组，确保用户ID变化时重新读取对应数据。
• 不要在组件顶层直接调用会触发setState的函数，否则必然导致无限重渲染。

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