本文深入探讨了在react应用中从firestore等服务异步获取嵌套数据时遇到的常见问题：当尝试使用`foreach`循环收集异步操作的结果时，可能会因为异步回调未被等待而导致返回空数组或未定义的数据。文章详细阐述了如何通过结合使用`array.prototype.map()`生成promise数组，并利用`promise.all()`并发等待所有异步操作完成，从而确保数据正确收集并解决`undefined`访问问题，提供了专业的解决方案和最佳实践。
异步数据收集的挑战与常见陷阱
在现代Web应用开发中，尤其是在使用React和Firestore等NoSQL数据库时，从嵌套集合中异步获取数据是一个常见的需求。然而，不恰当地处理异步操作的集合可能会导致数据访问问题，例如尝试访问数组元素时得到undefined。这通常发生在开发者尝试在forEach循环中执行异步操作并收集结果时。
考虑以下一个从Firestore获取文档及其子集合“objectives”的函数GetObjectives：
import { collection, getDocs } from 'firebase/firestore';import { db } from './firebaseConfig'; // 假设你的db实例已配置export async function GetObjectives(docId) { try { const querySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes")); const objectivesArray = []; // 问题所在：forEach不会等待内部的异步操作 querySnapshot.forEach(async (nodeDoc) => { const nodeId = nodeDoc.id; const objectivesQuerySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes", nodeId, "objectives")); const objectivesData = objectivesQuerySnapshot.docs.map((objectiveDoc) => ({ ...objectiveDoc.data(), id: objectiveDoc.id })); objectivesArray.push(objectivesData); }); // objectivesArray 在此处很可能为空，因为forEach内部的异步操作尚未完成 return objectivesArray; } catch (error) { console.error('Error during the recuperation of objectives : ', error); return null; }}
当使用上述函数并尝试访问返回结果的第一个元素时，例如result[0]，可能会得到undefined，即使console.log(result)可能看起来像一个包含数据的数组。这是因为Array.prototype.forEach方法本身是同步的，它不会等待其回调函数内部的异步操作完成。因此，当forEach循环结束后，objectivesArray很可能仍然是空的，或者只包含了部分未完全解析的数据，导致在函数返回时，外部调用者接收到一个空或不完整的数组。
解决方案：结合Promise.all()和Array.prototype.map()
要正确地收集多个异步操作的结果，我们需要确保所有内部的异步操作都已完成。JavaScript提供了Promise.all()方法来解决这个问题，它接收一个Promise数组，并返回一个新的Promise，该Promise在所有输入的Promise都解析后解析，并返回一个包含所有解析值的数组。
为了生成一个Promise数组供Promise.all()使用，我们可以利用Array.prototype.map()方法。map方法会为数组的每个元素调用一次回调函数，并使用回调函数的返回值创建一个新数组。如果回调函数是async函数，它将返回一个Promise，因此map会生成一个Promise数组。
以下是GetObjectives函数的修正版本：
import { collection, getDocs } from 'firebase/firestore';import { db } from './firebaseConfig'; // 假设你的db实例已配置export async function GetObjectives(docId) { try { const querySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes")); // 使用map生成一个Promise数组 const objectivesPromises = querySnapshot.docs.map(async (nodeDoc) => { // 注意这里是querySnapshot.docs const nodeId = nodeDoc.id; const objectivesQuerySnapshot = await getDocs(collection(db, "users", "userIdNotAvailableForTheMoment", "documents", docId, "nodes", nodeId, "objectives")); // 返回一个包含所有子目标数据的数组 return objectivesQuerySnapshot.docs.map((objectiveDoc) => ({ ...objectiveDoc.data(), id: objectiveDoc.id })); }); // 使用Promise.all等待所有Promise解析，并返回一个包含所有结果的数组 return Promise.all(objectivesPromises); } catch (error) { console.error('Error during the recuperation of objectives : ', error); return null; }}
修正后的代码解析
querySnapshot.docs.map(async (nodeDoc) => { … }):
我们现在对querySnapshot.docs（包含所有节点文档的数组）使用map方法，而不是forEach。map的回调函数被标记为async，这意味着它总是返回一个Promise。在每个回调中，我们执行内部的异步操作await getDocs(…)来获取子集合“objectives”。回调函数最后返回一个包含该节点所有“objectives”数据的数组。由于回调是async的，这个返回的数组实际上被包装成了一个Promise（即Promise>）。map方法最终会生成一个由这些Promises组成的数组，例如 [Promise, Promise, …]。
return Promise.all(objectivesPromises):
Promise.all()接收objectivesPromises数组。它会等待数组中的所有Promises都成功解析。一旦所有Promises都解析，Promise.all()自身会解析，并返回一个新数组，其中包含了所有内部Promises解析后的值（即每个节点的“objectives”数组）。这样，GetObjectives函数最终返回的将是一个完全解析的、包含所有目标数据的数组。
为什么map优于forEach进行异步收集
forEach: 主要用于遍历数组并执行副作用操作（如打印、修改外部变量）。它不返回任何值，并且不会等待其回调函数内部的异步操作。map: 用于将数组的每个元素转换成新值，并返回一个包含这些新值的新数组。当回调函数返回Promise时，map会自然地生成一个Promise数组，这正是Promise.all()所需要的。
如何使用修正后的函数
调用修正后的GetObjectives函数将更加直观和可靠：
// 假设 sortDocuments[parseInt(selectedDocument)].id 提供了正确的docIdGetObjectives(sortDocuments[parseInt(selectedDocument)].id) .then((result) => { console.log(result); // 应该会输出一个包含所有目标数据的嵌套数组 console.log(result[0]); // 现在应该能正确访问第一个节点的 objectives 数组 }) .catch((error) => { console.error("Failed to retrieve objectives:", error); });
在这种情况下，result将是一个类似以下结构的数组：
[ [ { "parents": [], "childrens": [], "content": "value", "id": "VULpo5mPCc2kckLC9BCy", "title": "value" } ], [ { "parents": [], "childrens": [], "content": "value", "id": "ANOTHER_ID", "title": "another value" } ]]
现在，result[0]将正确地访问到第一个节点的目标数组。
注意事项与总结
理解异步流: 深入理解async/await和Promise的工作原理是编写健壮异步代码的关键。async函数总是返回一个Promise，await关键字只能在async函数内部使用，它会暂停async函数的执行直到Promise解析。选择正确的迭代器: 当需要收集异步操作的结果时，map结合Promise.all()是比forEach更合适的模式。forEach适用于执行副作用，而不是收集返回值。错误处理: 始终在异步操作中使用try…catch块来捕获潜在的错误，提高应用的健壮性。Promise.all()会在其中任何一个Promise被拒绝时立即拒绝。并发限制: 对于大量并发的异步请求（例如，在一个非常大的数组上使用Promise.all()），可能会遇到性能瓶颈或API速率限制。在这种情况下，可能需要考虑使用Promise.allSettled()（获取所有Promise的结果，无论成功或失败）或实现自定义的并发限制器。
通过采纳Promise.all()与map的模式，开发者可以有效地管理复杂的异步数据流，确保数据被正确、完整地收集，从而避免因异步操作未完成而导致的undefined或空数据问题。
以上就是正确使用Promise.all()解决React中异步数据收集问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534352.html
微信扫一扫 
支付宝扫一扫 
