Firebase商品多图表单提交：.then报错、addProductStart触发两次如何修复

• 重复上传图片、重复触发dispatch：你将addProductStart的dispatch逻辑写在了单张图片上传完成的回调内，每成功上传1张图就会触发1次提交；同时每遍历1张图片就执行了2次put上传操作，导致Storage生成多个独立实例。
• .then报错：React的setState类方法是同步执行无Promise返回的，你对setProductThumbnail调用.then自然会抛出未定义错误。

// 原有图片选择处理函数可保留，优化了ID生成逻辑避免重复
const productImgHandler = (e) => {
  for (let i = 0; i < e.target.files.length; i++) {
    const selectedFiles = e.target.files[i];
    // 用时间戳+随机数替代纯随机，降低ID重复概率
    selectedFiles.id = Date.now() + Math.random();
    setpreProductThumbnail((prevState) => [
      ...prevState,
      selectedFiles,
    ]);
  }
};

const handleSubmit = async (e) => {
  e.preventDefault();
  setError(null);
  try {
    // 1. 批量上传所有图片，统一收集下载URL
    const uploadPromises = preproductThumbnail.map(async (image) => {
      const storageRef = storage().ref(`prodimages/${image.name}`);
      // 单次上传图片，避免重复put
      const uploadTask = storageRef.put(image);
      
      // 监听上传进度（可选保留）
      uploadTask.on("state_changed", (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(`上传进度：${progress.toFixed(2)}%`);
      });
      
      // 等待上传完成，返回下载URL
      await uploadTask;
      return storageRef.getDownloadURL();
    });
    
    // 2. 等待所有图片上传完成，拿到完整的URL数组
    const productThumbnailArr = await Promise.all(uploadPromises);
    
    // 3. 更新状态+一次性提交商品数据到Firestore
    setProductThumbnail(productThumbnailArr);
    dispatch(addProductStart({
      productCategory,
      productName,
      productThumbnail: productThumbnailArr,
      productPrice,
      productDesc,
    }));
    
    // 4. 提交完成重置表单
    resetForm();
  } catch (err) {
    // 统一捕获所有上传/提交错误
    setError(err.message);
  }
};

• 批量等待所有上传任务：用Promise.all等待全部图片上传完成后再统一提交商品数据，确保只触发1次dispatch，不会生成重复商品记录。
• 单次上传逻辑：每个图片仅执行1次put操作，避免Storage生成重复的文件实例。
• 异步逻辑规范化：用async/await改写回调嵌套逻辑，避免回调地狱，同时去掉对setState调用.then的错误写法。
• 统一错误捕获：所有上传、提交的异常都会被外层catch捕获，不需要在每个上传回调里单独处理错误。

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