React对接Google Realtime Database时如何合并两个数据查询方法

Firebase Realtime Database 原生单次查询仅支持单字段排序+单等值条件过滤，你现有两个独立事件处理函数每次触发都会发起一次全新的单条件查询，直接覆盖之前的筛选结果，没有同时保存两个下拉框的选中值做联合判断，才会出现选第二个下拉时丢失第一个筛选值的问题。

推荐采用「一次拉取全量数据+前端多条件过滤」的方案，不需要在数据库侧建冗余组合索引，维护成本更低，适配小到中等数据量的项目场景：

• 拆分状态分别存储两个下拉框的选中值、全量项目原始数据，避免每次筛选都重复请求数据库
• 组件挂载时一次性拉取projects节点全量数据并建立监听
• 两个下拉框的change事件只负责更新对应筛选值状态，不直接发起数据库查询
• 统一监听筛选状态变化，基于全量数据做联合过滤，得到最终展示结果

完整实现代码 #

import { useState, useEffect } from 'react';

const ProjectList = () => {
  // 第一个下拉框：项目经理筛选值
  const [selectedManager, setSelectedManager] = useState("");
  // 第二个下拉框：存储筛选字段名、选中值
  const [secondFilter, setSecondFilter] = useState({ field: "", value: "" });
  // 存储全量项目原始数据
  const [allProjects, setAllProjects] = useState([]);
  // 最终展示的筛选后数据
  const [sortedData, setSortedData] = useState([]);
  const [sort, setSort] = useState(false);

  // 组件挂载时拉取全量项目数据，仅执行一次
  useEffect(() => {
    const projectsRef = fireDb.child("projects");
    projectsRef.on("value", (snapshot) => {
      const projectList = [];
      snapshot.forEach((snap) => {
        projectList.push({
          id: snap.key,
          ...snap.val()
        });
      });
      setAllProjects(projectList);
    });

    // 组件卸载时移除数据库监听，避免内存泄漏
    return () => projectsRef.off("value");
  }, []);

  // 第一个下拉框（项目经理选择）change事件
  const handleManagerChange = (e) => {
    setSort(true);
    setSelectedManager(e.target.value);
  };

  // 第二个下拉框change事件
  // 注意：第二个下拉框的option value建议按「字段名:字段值」格式拼接，比如<option value="status:进行中">进行中项目</option>
  const handleSecondFilterChange = (e) => {
    setSort(true);
    const [field, value] = e.target.value.split(":");
    setSecondFilter({ field, value });
  };

  // 统一多条件筛选逻辑，筛选值变化时自动执行
  useEffect(() => {
    let filteredResult = [...allProjects];
    // 叠加项目经理筛选条件
    if (selectedManager.trim()) {
      filteredResult = filteredResult.filter(
        (item) => item.projectmanager === selectedManager
      );
    }
    // 叠加第二个筛选条件
    if (secondFilter.field && secondFilter.value) {
      filteredResult = filteredResult.filter(
        (item) => item[secondFilter.field] === secondFilter.value
      );
    }
    setSortedData(filteredResult);
  }, [selectedManager, secondFilter, allProjects]);

  // 下拉框、列表渲染逻辑按业务需求编写即可
  return <></>
}

注意：如果你的项目单节点数据量超过1000条、对数据权限管控要求高，需要在数据库侧做过滤，就要提前在Realtime Database中定义组合字段（比如把项目经理+项目状态拼成manager_status: "张三_进行中"的字段存在每条数据里），查询时直接按这个组合字段做equalTo匹配即可，但这种方式灵活性差，筛选项变多后需要维护大量组合索引，非必要场景优先推荐前端过滤方案。

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