Firebase Storage多图上传后批量获取下载URL存入React Hook问题求助

问题根因 #

• 你在map中使用的async回调没有被等待，代码执行到后面的打印逻辑时，上传、获取下载URL的异步任务都还没执行完成，无法拿到最新结果
• 原代码只把上传任务纳入了promise数组，没有把getDownloadURL的异步逻辑也交给Promise.all统一管控
• 每次单个图片上传完成就单独更新State，没有等所有URL收集完成后统一更新，同时resetForm的执行位置错误，会在上传任务刚开始就触发，不会等所有任务结束

修正后可直接运行的代码 #

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    // 生成每个图片对应的「上传+获取下载URL」的异步任务
    const uploadTasks = preproductThumbnail.map(async (image) => {
      const imageRef = storage().ref(`prodimages/${image.name}`);
      const uploadTask = imageRef.put(image);

      // 保留原有的上传进度监听逻辑
      uploadTask.on("state_changed",
        (snapshot) => {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log(progress);
        },
        (err) => {
          setError(err.message);
          throw err; // 抛出错误供外层统一捕获
        }
      );

      // 等待当前图片上传完成
      await uploadTask;
      // 上传完成后返回该图片的下载URL
      return await imageRef.getDownloadURL();
    });

    // 等待所有图片上传完成、所有URL获取完成，拿到完整的URL数组
    const allImageUrls = await Promise.all(uploadTasks);

    // 统一更新State，符合你期望的执行流程
    setProductThumbnail(allImageUrls);
    console.log("全部图片URL", allImageUrls);

    // 所有任务完成后再重置表单
    resetForm();
  } catch (err) {
    console.error("上传失败：", err);
  }

  console.log("preprod2: ", preproductThumbnail);
  // 注意：这里打印的productThumbnail还是旧值，因为React setState是异步更新的
  // 如果要拿到更新后的URL数组，可通过useEffect监听productThumbnail的变化
  console.log("prod2", productThumbnail);
};

额外说明 #

如果需要在State更新完成后执行后续逻辑，可以添加useEffect监听：

useEffect(() => {
  // productThumbnail更新完成后触发的逻辑
  console.log("State中最新的URL数组：", productThumbnail);
}, [productThumbnail])

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