ReactJS中如何实现从Firebase数据库获取数据无需页面刷新

解决方案 #

你当前使用的getDocs是单次拉取数据的API，只会在调用时请求一次数据，要实现无需刷新的实时数据同步，需要改用Firestore提供的实时监听器onSnapshot，同时修正你现有代码里的数组赋值逻辑问题。

修正后的完整代码示例

import { useState, useEffect } from 'react';
import { getFirestore, collection, query, onSnapshot } from 'firebase/firestore';

const [PostList, SetPostList] = useState([])
const db = getFirestore(firebaseConfig)

useEffect(()=>{
  // 构造查询规则
  const q = query(collection(db, "posts"))
  // 绑定实时监听器，数据发生变更时会自动触发回调
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const posts = []
    querySnapshot.forEach((post) => {
      posts.push(post.data())
    })
    // 一次性更新整个列表，避免循环内多次setState导致的不必要渲染
    SetPostList(posts)
    console.log(posts)
  })

  // 组件卸载时清除监听器，避免内存泄漏
  return () => unsubscribe()
}, [])

关键改动说明

• 把一次性获取的getDocs替换为onSnapshot实时监听器，Firestore会自动监听posts集合的所有变更（新增、修改、删除），只要数据有变化就会触发回调更新本地状态，页面无需刷新就能看到最新数据
• 修正了原代码里循环内SetPostList([post.data()])的逻辑问题：原写法会在遍历的时候每次用新的单条数据覆盖整个数组，最终列表只会保留最后一条数据，现在是先把所有数据整理到临时数组再一次性更新状态
• 新增了卸载回调，组件销毁时调用unsubscribe清除监听器，防止内存泄漏

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