React中多选图片转Base64仅显示单个结果的问题求助

问题场景 #

我编写了一个名为useBase64的自定义Hook，用于将图片转换为Base64格式。Hook接收初始值，返回handleCreateBase64函数和logo状态。当传入一组File类型的图片数组，尝试遍历转换所有图片并存入logo时，明明选中了3张图片，logo中却仅能看到1个Base64结果。

Hook代码如下：

import { useCallback, useState } from "react";

export const useBase64 = (initialValue) => {
  const [logo, setLogo] = useState(initialValue)

  const handleCreateBase64 = useCallback(async (receivedFile) => {
      let file = receivedFile;

      if(initialValue instanceof Array) {
        file = Object.values(receivedFile)

       file.map(async el => {
          const base64 = await convertToBase64(el)
          setLogo([...logo, base64])
      }) 
      }
    });

  const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      if (!file) {
        console.log("no image");
      } else {
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
          resolve(fileReader.result);
        };
      }
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  return { handleCreateBase64, logo }
}

问题现象：

问题原因分析 #

1. 状态更新的闭包陷阱：handleCreateBase64通过useCallback缓存，内部引用的logo是Hook初始化或上一次依赖更新时的快照值。当遍历图片调用setLogo([...logo, base64])时，所有异步回调都基于同一个旧的logo数组，多次更新只会互相覆盖，最终仅保留最后一次添加的Base64值。
2. 异步遍历未正确处理：map函数中使用async/await不会等待所有Promise完成，多个setLogo会几乎同时触发，且都基于旧状态更新，导致最终结果只保留最后一次操作。
3. 数组转换逻辑冗余/错误：如果传入的receivedFile是FileList（文件选择器返回的类型），用Object.values转换不如Array.from准确，且initialValue instanceof Array的判断逻辑无法区分初始值是空数组还是非数组情况，可能导致不必要的转换。
4. Promise错误处理缺失：convertToBase64中当没有传入文件时，只打印日志但未reject，会导致Promise一直处于pending状态，无法捕获错误。

解决方法 #

核心修复点 #

• 使用函数式更新调用setLogo，确保每次更新都基于最新的状态，而非闭包中的旧值。
• 用Promise.all等待所有图片转换完成后，一次性更新状态，避免多次状态更新冲突。
• 修正数组转换逻辑，针对FileList类型正确转换为数组。
• 完善错误处理，避免Promise挂起。

修正后的完整代码 #

import { useCallback, useState } from "react";

export const useBase64 = (initialValue = []) => {
  const [logo, setLogo] = useState(initialValue);

  const handleCreateBase64 = useCallback(async (receivedFile) => {
    // 处理FileList或数组类型的输入
    const fileList = Array.isArray(receivedFile) 
      ? receivedFile 
      : Array.from(receivedFile);

    try {
      // 等待所有图片转换完成
      const base64List = await Promise.all(
        fileList.map(file => convertToBase64(file))
      );
      // 一次性更新状态，可选择替换原有数组或追加
      // 替换：setLogo(base64List)
      // 追加：
      setLogo(prevLogo => [...prevLogo, ...base64List]);
    } catch (error) {
      console.error("图片转换Base64失败:", error);
    }
  }, []); // 依赖为空，内部用函数式更新不依赖外部状态

  const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      if (!file) {
        reject(new Error("未提供有效的图片文件"));
        return;
      }
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  return { handleCreateBase64, logo };
};

代码说明 #

1. 函数式更新：setLogo(prevLogo => [...prevLogo, ...base64List])通过回调函数获取最新的prevLogo状态，彻底避免闭包陷阱。
2. Promise.all处理异步：等待所有图片转换完成后一次性更新状态，减少状态更新次数，避免冲突。
3. 输入类型兼容：自动判断输入是数组还是FileList，用Array.from正确转换FileList为数组。
4. 错误处理：添加try/catch捕获转换过程中的错误，convertToBase64中完善了空文件的reject逻辑。

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