React+Firebase多图片上传后无法获取URL问题求助

你的代码核心问题在于**Promise.all没有正确等待上传任务完成**，同时状态更新的异步特性导致你在uploadFile内的console.log无法获取到最新的URL数组。

具体来说：

• files.map里的函数没有返回Promise，Promise.all实际等待的是一个由undefined组成的数组，会直接resolve，所以后续的console.log会在上传任务完成前执行，此时urls还是初始的空数组。
• setUrls是异步操作，即使上传任务完成，也不会立刻更新urls状态，所以同步的console.log拿不到最新值。

把每个上传任务封装成Promise，让Promise.all能正确等待所有上传完成并收集所有下载URL，最后一次性更新状态。修改后的代码如下：

import React, { useState } from "react";
import { storage } from "../../ultis/firebase";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const MyApp= () => {
  const [files, setFiles] = useState([]);
  const [urls, setUrls] = useState([]);
  const [percs, setPercs] = useState(0);

  const uploadFile = async () => {
    // 封装每个上传任务为Promise
    const uploadPromises = files.map((f) => {
      return new Promise((resolve, reject) => {
        const name = new Date().getTime() + f.name;
        const storageRef = ref(storage, `images/products/${name}`);
        const uploadTask = uploadBytesResumable(storageRef, f);

        uploadTask.on(
          "state_changed",
          (snapshot) => {
            // 可选：处理上传进度
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            setPercs(progress);
          },
          (error) => {
            // 上传失败时抛出错误
            reject(error);
          },
          () => {
            // 上传完成后获取URL并返回
            getDownloadURL(uploadTask.snapshot.ref)
              .then((downloadURL) => resolve(downloadURL))
              .catch(reject);
          }
        );
      });
    });

    try {
      // 等待所有上传完成，拿到完整URL数组
      const newUrls = await Promise.all(uploadPromises);
      // 一次性更新状态
      setUrls(newUrls);
      // 这里可以正确输出所有URL
      console.log(newUrls);
    } catch (error) {
      console.error("上传失败:", error);
    }
  };

  // 组件渲染时会追踪状态变化，所以这里能看到最终的URL数组
  console.log(urls);

  return (
    <div className="p-3">
      {/* 补充文件选择和上传按钮 */}
      <input
        type="file"
        multiple
        onChange={(e) => setFiles(Array.from(e.target.files))}
      />
      <button onClick={uploadFile}>批量上传图片</button>
    </div>
  );
};

export default MyApp;

1. 上传任务Promise化：每个文件的上传流程被包装成Promise，让Promise.all能准确追踪每个任务的完成状态，确保所有上传都结束后再执行后续逻辑。
2. 批量更新状态：通过Promise.all收集全部URL后一次性调用setUrls，既避免了多次状态更新的性能损耗，也能在函数内直接拿到完整的URL数组。
3. 错误捕获：添加try/catch处理上传过程中的异常，方便调试和错误提示。

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