React中useState无法接收FileReader生成的图片数组问题求助

我尝试从HTML文件输入框获取图片URL，将其发送到后端并上传至Cloudinary，但遇到问题：已生成包含图片base64地址的imagesArr，但调用setImages更新useState状态时，状态数组始终为空。此前尝试其他方法也存在bug，需多次上传图片状态才不会返回undefined。

现有代码 #

TypeScript逻辑

const [images, setImages] = useState<string[]>([]);

const previewFiles = (files: any, imagesArr: any) => {
  const reader = new FileReader();
  reader.readAsDataURL(files);
  reader.onloadend = async () => {
    imagesArr.push(reader.result);
  };
};

const fileOnChangeHandler = async (e: ChangeEvent<HTMLInputElement>) => {
  let files = e.currentTarget.files;
  let imagesArr: string[] = [];
  Array.from(files!).forEach((file: any) => {
    previewFiles(file, imagesArr);
  });
  setImages((state: any) => [...state, ...imagesArr]);
  console.log("the images array", imagesArr);
  console.log("the set state array", images);
};

HTML输入元素

<input
  className="form-control"
  type="file"
  multiple
  accept="image/png,image/jpeg,image/jpg,image/jfif"
  id="formFile"
  onChange={fileOnChangeHandler}
/>

控制台输出 #

the images array
[]
0: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAUAAowDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDFWTcBk9PelEucADpVN5kjHIz/AFqeKYSR7WUKQMA153Sx9GkWkndT8rcjnmtKDUpYYwGGV9QKzBKzRsrj5QKltplkGxmBPQE961hKxnOmpLVG/bXUUwJzhvQ1IXU5OeKw1TZJuUsvHbtVmG5+Y…"
1: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAQ4BDgDASIAAhEBAxEB/8QAHQABAAEFAQEBAAAAAAAAAAAAAAECAwQGBwUICf/EAFsQAAEDAwMCBAMEBQUMBwYBDQEAAgMEBREGEiExQQcTUWEUInEIMoGRFSNCobEzUmLB0RYXJENUcnSCk7Lh8CU1NnOSosI0U2ODs/FEVWTDGCY3RaNWhJTS0//EABoBAQADAQEBAAAAAAAAAAAAAAABAgMEBQb/xAA3EQEAAgEDAgQDBwMEAgMBAAAAAQIDBBEhEjEFE0FRYXGRFCIygaGx8ELB0RUjM1Lh8TRTVGL/2gAMAwEAAhEDEQA/APqhERBovjNfKixaHqJKGZ0FVVSspY5WHDmbslxB7Ha13PZci8ELrc4dfUdFDVVElJVtk+Jjklc9pDWFwdyTgggc+6237SVaPhLHQNdy6SSocPTaA0f7xXhfZ1o/P1dcapwy2low0H0c939jSg+hwiBEBERARFZrPO+En+E2/EbHeVu6b8cZ9s4QWLtdKG0Ujqq51cNLTtGS+V4aPw9T7Bcr1P43UNPmLTdFJXPOR8RUAxRj3DSNzv8AyrmDdKa01PepPjrdcKi5MJbLPXNMbGnuA9wxj0Dc8LpOmPBGniLJ9TV7ql2OaWl+WPPu8/Mfwwg2Twh1xW6xpbiy5U0MdRROYPMhBDHh4OODnBGPVdDWBZLPb7JQso7TRw0lM3kMjGMn1J6k+5WegIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAi…"
2: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAUABJQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5dEhLfMcE9xWjaWqkZk+YHvjpUCQBBkDdWrbRMbcsDip5l1OhRIowqtsRmYf7tTvNFHGTKCuOmDyary5twW3DcahVJZ3HG9m6CocuxpZLcRrhZm+XIGcdat6fpNzqN7HDZxPyRk4NdP4W8EXWp…"
length:3
the set state array
[]
length:0

解决方案 #

问题根源 #

FileReader.readAsDataURL是异步操作，你调用setImages时，所有文件的读取还未完成，此时imagesArr仍是空数组。另外，setImages更新状态是异步的，调用后立即打印images只能拿到旧状态。

修正后的代码 #

import { useState, useEffect, ChangeEvent } from 'react';

const [images, setImages] = useState<string[]>([]);

// 用Promise包装文件读取操作，确保读取完成后返回结果
const previewFile = async (file: File): Promise<string> => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      resolve(reader.result as string);
    };
  });
};

const fileOnChangeHandler = async (e: ChangeEvent<HTMLInputElement>) => {
  const files = e.currentTarget.files;
  if (!files) return; // 处理未选择文件的情况

  // 等待所有文件读取完成，拿到完整的base64数组
  const newImages = await Promise.all(
    Array.from(files).map(file => previewFile(file))
  );

  // 合并旧状态与新图片数组，更新状态
  setImages(prevState => [...prevState, ...newImages]);
};

// 通过useEffect监听状态变化，查看最新的images值
useEffect(() => {
  console.log("更新后的images状态:", images);
}, [images]);

关键说明 #

1. 异步操作同步化：用Promise包装FileReader，确保每个文件读取完成后再收集结果；
2. 等待所有异步操作：Promise.all会等待所有文件读取完成，拿到完整的newImages数组后再调用setImages；
3. 正确查看状态：setImages是异步的，必须通过useEffect监听images的变化，才能获取到更新后的最新值。

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