React+MUI多文件上传进度状态更新异常问题排查

你的代码主要存在三个核心问题：

1. 异步上传未等待完成就更新进度 #

uploadItem 属于异步操作（文件上传接口基本都是异步的），当前写法是循环内调用 uploadItem 后立刻更新state，会导致所有上传请求几乎同时发起，进度条直接跳到最终值，而非每完成一个文件就更新一次进度。

2. 闭包导致的state更新异常 #

循环里的 setState(state + statusStep) 捕获的是初始state值（也就是0），由于循环是同步执行的，所有setState回调都会复用同一个初始state，最终state只会被设置为 0 + statusStep，无法实现逐步累加的效果。

3. 未阻止表单默认提交行为 #

按钮设置了type="submit"，点击后会触发表单默认提交逻辑，导致页面刷新，直接丢失上传状态。

修正后的代码 #

import { Button } from "@mui/material";
import { useState } from "react";

import { uploadItem } from "../api/backendCalls";

export default function ItemUpload() {
  const [uploadProgress, setUploadProgress] = useState(0);

  const handleSelectedFile = async (event) => {
    // 阻止表单默认提交，避免页面刷新
    event.preventDefault();
    
    const files = Array.from(event.target.files);
    if (files.length === 0) return;

    const statusStep = 100 / files.length;
    // 上传前重置进度
    setUploadProgress(0);

    // 逐个处理文件，确保上一个上传完成后再更新进度并处理下一个
    for (const file of files) {
      await uploadItem(file);
      // 用函数式更新state，确保基于最新进度值计算
      setUploadProgress(prev => prev + statusStep);
    }
  };

  return (
    <form onSubmit={handleSelectedFile}>
      <Button
        variant="contained"
        type="submit"
        size="large"
        color="secondary"
        component="label"
        fullWidth
      >
        Carica {Math.round(uploadProgress)}%
        <input type="file" hidden multiple />
      </Button>
    </form>
  );
}

关键修改说明 #

• 异步等待上传完成：用async/await包裹uploadItem，保证每个文件上传完成后再更新进度。
• 函数式state更新：setUploadProgress(prev => prev + statusStep)，每次更新都基于最新的进度值计算，避开闭包陷阱。
• 阻止表单默认行为：添加event.preventDefault()，避免页面刷新丢失状态。
• 进度值取整：用Math.round处理进度值，避免显示杂乱的小数。
• 空文件判断：用户未选择文件时直接返回，避免出现计算错误。

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