React中通过Firebase Realtime Database遍历数据实时渲染任务卡片问题

1. 定义状态存储任务列表 #

用React的useState钩子存储从Firebase拉取到的作业数据，状态更新时组件会自动重新渲染：

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

// 组件内部
const [homeworkList, setHomeworkList] = useState([]);

2. 调整useEffect监听逻辑 #

移除onlyOnce: true配置开启实时监听，数据变更时自动更新状态，同时添加监听卸载函数避免内存泄漏：

useEffect(() => {
  // 确保currentUser存在再执行监听逻辑
  if (!currentUser?.uid) return;
  
  const db = getDatabase();
  const dbRef = query(
    ref(db, 'Homeworks/' + currentUser.uid),
    orderByChild('/priority')
  );

  // 开启实时监听
  const unsubscribe = onValue(dbRef, (snapshot) => {
    const list = [];
    snapshot.forEach((childSnap) => {
      // 把数据和唯一标识key存入数组，用于列表渲染的key属性
      list.push({
        id: childSnap.key,
        ...childSnap.val()
      });
    });
    // 更新状态触发组件重渲染
    setHomeworkList(list);
  });

  // 组件卸载时取消监听，防止内存泄漏
  return () => unsubscribe();
}, [currentUser?.uid]); // 依赖项添加currentUser.uid，用户切换时自动重新监听对应数据

3. 在return中渲染任务卡片 #

直接遍历存储任务的状态数组，渲染对应的卡片元素即可：

return (
  <div className="task-card-container">
    {homeworkList.map((homework) => (
      <div key={homework.id} className="task-card">
        <h3>{homework.classRef}</h3>
        <p>难度：{homework.difficulty}</p>
        <p>预计时长：{homework.duration}分钟</p>
        <p>优先级：{homework.priority}</p>
      </div>
    ))}
  </div>
);

现在你新增任务写入Firebase Realtime Database后，onValue监听会自动触发拉取最新数据，更新homeworkList状态，页面卡片列表就会自动刷新，不需要手动触发刷新操作。

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