如何从Promise中获取值并存储到数组用于React开发

原代码问题分析 #

你的代码存在两个关键问题：

• 同时混用await和.then()属于冗余写法，且.then()中的forEach没有返回值，导致multipleurls最终为undefined
• Promise.all本身会返回所有Promise resolve后的结果数组，你不需要额外用forEach遍历打印，直接接收这个数组即可

正确写法示例 #

如果你的urlRef是包含10个Firebase存储引用的数组，直接用await接收Promise.all的结果就能拿到完整URL列表：

// 假设urlRefs是你的10个存储引用数组，比如const urlRefs = [storageRef1, storageRef2, ..., storageRef10];
const multipleUrls = await Promise.all(urlRefs.map(ref => ref.getDownloadURL()));
// 此时multipleUrls就是包含所有URL的数组，可直接在代码其他位置使用
console.log(multipleUrls);

你提到的封装函数解法 #

将逻辑封装成函数并返回结果，也是完全可行的方案，方便在代码任意需要的地方调用：

async function fetchFirebaseUrls() {
  const urlRefs = [/* 填入你的10个存储引用 */];
  return Promise.all(urlRefs.map(ref => ref.getDownloadURL()));
}

// 在需要使用的地方调用（注意要在async函数内）
const urls = await fetchFirebaseUrls();
// 直接使用urls数组即可

核心逻辑都是正确接收Promise.all解析后的结果数组，避免在.then()中使用无返回值的forEach导致数据丢失。

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