ReactJS中页面不刷新数据无法更新问题求助

问题根源 #

你当前使用getDocs仅在组件挂载时一次性拉取Firebase数据，没有监听数据的实时变更。当通过updateDoc修改数据后，前端无法主动感知Firebase的内容变化，必须刷新页面重新执行getDocs才能获取最新数据。

两种解决思路 #

思路1：更新后手动重新拉取数据 #

把数据获取逻辑抽成独立函数，在更新操作完成后手动调用，强制更新本地状态：

const [activityproduct, setActvityProduct] = useState([])

// 抽离数据获取逻辑
const fetchData = async () => {
  const querySnapshot = await getDocs(collection(dbname, "tablename"));  
  const arr = [];
  querySnapshot.forEach((doc) => {
    arr.push({
      ...doc.data(),
      id: doc.id,
    });
  });         
  setActvityProduct(arr);
};

useEffect(() => {
  let isMounted = true;

  const doFetch = async () => {
    try {
      await fetchData();
    } catch (err) {
      if (isMounted) {
        console.error("获取数据失败", err);
      }
    }
  };   
    
  doFetch();

  return () => {
    isMounted = false;
  };
}, []);

// 更新后触发重新拉取
const handleUpdate = async () => {
  const updateData = doc(dbname, "tablename", id)
  await updateDoc(updateData, {name1: title})
  setTitle("")
  await fetchData();
}

思路2：用Firebase实时监听（推荐） #

利用Firestore的onSnapshot方法监听数据的实时变化，当Firebase中的数据增删改时，会自动触发回调更新本地状态：

const [activityproduct, setActvityProduct] = useState([])

useEffect(() => {
  // 订阅数据变化
  const unsubscribe = onSnapshot(
    collection(dbname, "tablename"),
    (querySnapshot) => {
      const arr = [];
      querySnapshot.forEach((doc) => {
        arr.push({
          ...doc.data(),
          id: doc.id,
        });
      });
      setActvityProduct(arr);
    },
    (err) => {
      console.error("监听数据变化失败", err);
    }
  );

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

const handleUpdate = async () => {
  const updateData = doc(dbname, "tablename", id)
  await updateDoc(updateData, {name1: title})
  setTitle("")
}

方案对比 #

• 思路1适合不需要实时同步的场景，手动控制数据更新时机；
• 思路2是Firestore官方推荐的实时同步方案，能自动感知所有数据变更，无需手动触发刷新。

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