React项目Firebase多图上传：异步Promise无法更新数组状态求助

你的核心问题是错误地将上传任务（uploadTask）直接放入Promise.all，但上传任务完成仅代表文件上传结束，获取下载URL是后续异步操作，且React的useState更新是异步的，导致Promise.all执行时urls状态还未更新。

修复方案：将每个上传+获取URL的流程包装为Promise #

重构代码，把单张图片的上传、获取URL逻辑封装成独立Promise，让Promise.all等待所有URL获取完成后再执行后续逻辑，无需依赖useState存储URL。

修改后的完整代码：

const [imgs, setImgs] = useState([]);
// 若无需在其他组件/场景展示URL，可删除urls状态
// const [urls, setUrls] = useState([]);

const uploadImages = async () => {
  try {
    // 为每张图片创建上传+获取URL的Promise
    const uploadPromises = imgs.map((image) => {
      return new Promise((resolve, reject) => {
        const imageRef = ref(storage, `Drives/${image.name + v4()}`);
        const uploadTask = uploadBytesResumable(imageRef, image);

        uploadTask.on(
          "state_changed",
          (snapshot) => {
            const progress = Math.round(
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            );
            // 如需跟踪进度，可在此dispatch Redux action更新进度状态
            // dispatch(updateUploadProgress(progress));
          },
          (error) => {
            // 上传失败时reject错误
            reject(error);
          },
          () => {
            // 上传完成后获取URL，成功则resolve，失败则reject
            getDownloadURL(uploadTask.snapshot.ref)
              .then((url) => resolve(url))
              .catch(reject);
          }
        );
      });
    });

    // 等待所有上传+URL获取完成，直接拿到完整URL数组
    const urls = await Promise.all(uploadPromises);

    toast.success("所有图片上传完成");
    const FormatDate = moment(data.date).format("DD/MM/YYYY");
    const { __v, ...rest } = data;

    if (urls.length === 0) {
      toast.error("未上传任何图片！");
      dispatch(clearState());
      return;
    }

    const formData = {
      ...rest,
      date: FormatDate,
      driveImages: urls,
      flags: {
        isUploadImage: true,
      },
    };
    dispatch(updateDrives(formData));
  } catch (err) {
    toast.error(err.message || "上传失败，请重试");
  }
};

关键说明 #

1. Promise封装逻辑：每个图片的上传流程被包装为Promise，只有当获取到下载URL后才会resolve，确保Promise.all等待的是上传+URL获取的完整流程，而非仅上传完成。
2. 避免依赖useState异步更新：直接在函数内通过await Promise.all获取URL数组，无需等待React状态更新，解决了原代码中状态更新滞后的问题。
3. 统一错误处理：用try/catch捕获所有上传、URL获取过程中的错误，替代分散的alert和catch，错误提示更友好。

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