React中使用Firebase onSnapshot多查询存储数据遇问题求助

核心问题拆解 #

• 无限循环：组件每次渲染都会重新执行comp?.map创建新的查询和订阅，状态更新后又触发组件重渲染，形成循环。
• 数据覆盖：直接调用setJobs赋值会替换掉之前的数组，无法累积多个CompId返回的数据。

解决思路与代码实现 #

1. 用useEffect管控订阅生命周期 #

把订阅逻辑放到useEffect中，仅当comp数组变化时才重新创建订阅，同时在组件卸载或comp更新时清理旧订阅，避免内存泄漏和重复监听。

2. 基于现有状态合并数据 #

更新状态时，要保留之前已存储的其他CompId数据，而非直接覆盖。可以用对象按CompId分组存储，或合并为统一数组（按需去重）。

完整示例代码 #

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

const YourComponent = ({ comp }) => {
  // 用对象存储每个公司对应的职位数据，键为CompId
  const [jobsByComp, setJobsByComp] = useState({});

  useEffect(() => {
    const unsubscribes = [];

    if (comp?.length) {
      comp.forEach(compId => {
        const q = query(
          collection(db, "listings", compId, "jobOffers"),
          where("activePost", "==", true)
        );

        // 创建订阅并保存取消函数
        const unsubscribe = onSnapshot(q, querySnapshot => {
          const currentCompJobs = querySnapshot.docs.map(doc => ({
            id: doc.id,
            data: doc.data(),
            compId // 关联所属公司ID，方便后续区分
          }));

          // 合并到现有状态，不覆盖其他公司的数据
          setJobsByComp(prev => ({
            ...prev,
            [compId]: currentCompJobs
          }));
        });

        unsubscribes.push(unsubscribe);
      });
    }

    // 清理逻辑：取消所有旧订阅
    return () => unsubscribes.forEach(unsubscribe => unsubscribe());
  }, [comp]); // 仅当comp数组变化时重新执行订阅逻辑

  // 若需要合并为统一数组展示
  const allJobs = Object.values(jobsByComp).flat();

  return (
    <div>
      {allJobs.map(job => (
        <div key={`${job.compId}-${job.id}`}>
          <h3>{job.data.title}</h3>
          <p>{job.data.description}</p>
        </div>
      ))}
    </div>
  );
};

关键细节说明 #

• 订阅清理：useEffect返回的清理函数会在组件卸载或comp更新时取消所有旧订阅，防止无效监听占用资源。
• 状态合并：通过setJobsByComp(prev => ({...prev, [compId]: currentCompJobs}))基于之前的状态更新，确保每个CompId的数据都被保留。
• 避免循环：订阅逻辑仅依赖comp数组，状态更新不会触发重新订阅，从根源解决无限循环问题。

如果需要统一数组且去重（跨集合可能出现重复文档ID），可调整状态更新逻辑：

// 初始状态设为数组：const [allJobs, setAllJobs] = useState([]);
setAllJobs(prev => {
  // 合并新数据与旧数据，按compId+id去重
  const merged = [...prev, ...currentCompJobs];
  return merged.filter((job, idx, self) => 
    idx === self.findIndex(j => j.id === job.id && j.compId === job.compId)
  );
});

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