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
相关产品推荐
相关产品推荐

