多Axios异步回调下React数组状态更新异常问题咨询

问题场景 #

开发支持图片上传的React组件，简化场景需上传3张图片，要求每张上传完成后加入已上传文件列表。但因useState的setter方法异步执行，最终仅最后一张上传的文件被加入列表，其余两次操作被覆盖。

示例代码 #

const Example = () => {
  const defaultValues = ["aaa.jpg", "bbb.jpg", "ccc.jpg"];
  const [uploadedFiles, setUploadedFiles] = React.useState([...defaultValues]);

  const uploadFunction = () => {
    // 待上传图片列表
    const selectedImagesToUpdate = ["ddd.jpg", "eee.jpg", "fff.jpg"];
    // 遍历上传
    selectedImagesToUpdate.forEach(item => {
      uploadImage(item).then(response => {
        console.log("add item ", response);
        setUploadedFiles([...uploadedFiles, response]); // 问题所在
      })
    });
  }

  // 模拟异步上传（实际为AWS S3或接口调用）
  const uploadImage = (image) => {
    return Promise.resolve(image);
  }

  return ( 
  <div>
    <p>UploadedFiles:{JSON.stringify(uploadedFiles)}</p> 
    <button onClick={uploadFunction}>Upload</button> 
    <button onClick={() => setUploadedFiles([...defaultValues])}>Reset</button> 
  </div>
  );
};

// 渲染组件
ReactDOM.createRoot(document.getElementById("root"))
.render(<Example title = "Example"/>);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

当前执行结果 #

["aaa.jpg","bbb.jpg","ccc.jpg","fff.jpg"]

期望结果 #

["aaa.jpg","bbb.jpg","ccc.jpg","ddd.jpg","eee.jpg","fff.jpg"]

问题解答 #

1. 修复setState覆盖问题的方法 #

问题核心：forEach循环中所有异步回调拿到的uploadedFiles都是同一批次的旧状态，因为setUploadedFiles不会同步更新状态。

解决方式：使用函数式更新，让React基于最新的状态生成新状态：

setUploadedFiles(prevFiles => [...prevFiles, response]);

修改后的uploadFunction：

const uploadFunction = () => {
  const selectedImagesToUpdate = ["ddd.jpg", "eee.jpg", "fff.jpg"];
  selectedImagesToUpdate.forEach(item => {
    uploadImage(item).then(response => {
      console.log("add item ", response);
      // 基于最新状态追加文件，避免覆盖
      setUploadedFiles(prevFiles => [...prevFiles, response]);
    })
  });
};

这种写法会让React自动传入当前最新的状态prevFiles，每次更新都基于上一次的最终状态，不会出现覆盖问题。

2. 适配AWS S3场景的多文件上传优化方案 #

针对你实际场景中「用户提交时删除部分选中文件+上传部分文件到AWS S3」的需求，推荐两种方案：

方案一：批量处理+统一状态更新

如果不需要实时展示单文件上传进度，可等所有文件上传完成后一次性更新状态，减少渲染次数：

const uploadFunction = async () => {
  const selectedImagesToUpdate = ["ddd.jpg", "eee.jpg", "fff.jpg"];
  // 先过滤用户选中要删除的文件（deleteIds为用户选中的待删除文件名称/ID数组）
  const filteredOldFiles = uploadedFiles.filter(file => !deleteIds.includes(file));
  
  // 批量上传所有待上传文件，支持捕获失败情况
  const uploadResults = await Promise.allSettled(
    selectedImagesToUpdate.map(item => uploadImage(item))
  );
  
  // 提取上传成功的文件
  const successFiles = uploadResults
    .filter(res => res.status === "fulfilled")
    .map(res => res.value);
  
  // 合并过滤后的旧列表和新上传文件，一次性更新状态
  setUploadedFiles([...filteredOldFiles, ...successFiles]);
};

优点：逻辑简洁，减少状态更新次数；便于统一处理上传失败的文件（比如提示用户重新上传）。

方案二：实时追踪上传状态（带进度/失败提示）

如果需要给用户展示单文件的上传进度、成功/失败状态，可维护包含上传状态的文件列表：

// 初始化带状态的文件列表
const [fileList, setFileList] = React.useState([
  { name: "aaa.jpg", status: "done" },
  { name: "bbb.jpg", status: "done" },
  { name: "ccc.jpg", status: "done" }
]);

const uploadFunction = () => {
  const selectedImagesToUpdate = ["ddd.jpg", "eee.jpg", "fff.jpg"];
  // 先删除用户选中的文件
  setFileList(prev => prev.filter(file => !deleteIds.includes(file.name)));
  
  // 添加待上传文件，标记状态为"uploading"
  const newUploadFiles = selectedImagesToUpdate.map(name => ({ name, status: "uploading" }));
  setFileList(prev => [...prev, ...newUploadFiles]);

  // 逐个上传，更新对应文件状态
  selectedImagesToUpdate.forEach(async (name) => {
    try {
      // 实际AWS S3上传可监听进度，这里简化处理
      await uploadImage(name);
      // 上传成功，更新状态为"done"
      setFileList(prev => prev.map(file => 
        file.name === name ? { ...file, status: "done" } : file
      ));
    } catch (err) {
      // 上传失败，标记状态并记录错误信息
      setFileList(prev => prev.map(file => 
        file.name === name ? { ...file, status: "error", msg: err.message } : file
      ));
    }
  });
};

这种方案更贴近实际业务，能给用户更友好的反馈，同时所有状态更新都使用函数式写法，确保准确性。

AWS S3上传额外优化点

• 使用预签名URL直接从前端上传，减少后端中转压力；
• 大文件采用分块上传（Multipart Upload），提升成功率；
• 上传前对图片进行压缩、格式转换，减少文件体积；
• 控制并发上传数（比如用p-limit库限制同时上传2-3个文件），避免浏览器请求阻塞。

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