You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React中Firebase数据处理后setState更新状态异常求助

问题:React+Firebase数据状态更新异常

我使用React.js和Firebase进行数据获取时遇到状态更新问题:状态变量data始终只能获取到初始值(空数组)。明明在capturarPaginacion函数中通过setData(list)用处理好的list数组更新状态,console.log(list)能正确输出包含数据的数组,但console.log(data)始终为空数组。尝试给list.sort添加await后,data状态依然是空数组。

相关代码

const capturarPaginacion = async () => {
    let list = [];
    try {
        // 用collectionGroup()获取所有"solicitudes"下的"diary"子集合文档
        const subCollectionSnapshot = await getDocs(collectionGroup(db, "diary"));
        // 创建Map,按请求ID分组"diary"数据
        const diaryDataMap = new Map();
        subCollectionSnapshot.forEach((subDoc) => {
            const data = subDoc.data();
            const solicitudId = data.idSolicitude;
            if (!diaryDataMap.has(solicitudId)) {
                diaryDataMap.set(solicitudId, []);
            }
            diaryDataMap.get(solicitudId).push(data);
        });

        // 获取"solicitudes"集合的数据
        const querySnapshot = await getDocs(collection(db, "solicitudes"));
        for (const doc of querySnapshot.docs) {
            const solicitudData = doc.data();
            const solicitudId = doc.id;

            // 获取当前请求关联的"diary"数据
            const datosAdicionalesData = diaryDataMap.get(solicitudId) || [];

            // 合并主集合与子集合的数据
            const combinedUserData = { id: solicitudId, ...solicitudData, datosAdicionales: datosAdicionalesData };
            list.push(combinedUserData);
        }

        // 按notificationDateAndHour降序排序
        list.sort((a, b) => {
            const dateA = a.datosAdicionales.notificationDateAndHour;
            const dateB = b.datosAdicionales.notificationDateAndHour;
            return new Date(dateB) - new Date(dateA); // 降序排列
        })
        setData(list)
        console.log(list)
        console.log(data)
    } catch (error) {
        console.error(error);
    }
}
capturarPaginacion()
}, [])

相关截图说明

  • 代码截图:展示当前实现的完整代码逻辑
  • console.log(data)截图:显示输出结果为空数组
  • 含console.log(list)的代码截图:标注了list打印语句在代码中的位置
  • console.log(list)截图:显示输出结果为包含有效数据的数组

内容的提问来源于stack exchange,提问作者daniel felipe ruiz castañeda

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 02:37:06