MUI LinearDeterminate进度条异步提交时不更新问题排查

核心问题点： #

1. 父组件中done不是React状态：你用let done = 0定义的是普通变量，更新它不会触发组件重渲染，导致子组件LinearDeterminate始终拿到初始的0值。
2. 子组件useEffect未监听依赖变化：useEffect的依赖数组是空的，只会在组件挂载时执行一次，之后不管doneSoFar怎么变，都不会重新计算进度。
3. 异步任务处理错误：promises数组是空的，循环里没把异步任务添加进去；而且done++放在同步循环里，会一次性把done加到data.length，根本反映不了异步任务的真实完成进度。
4. 没必要用定时器轮询：进度应该随doneSoFar的变化实时更新，定时器完全是多余的。

修改后的代码 #

父组件MyModal：

import { useState } from "react";
import LinearDeterminate from "./LinearDeterminate";

export default function MyModal() {
  const data = []; // 你的数据
  const [done, setDone] = useState(0); // 把done改成React状态

  const handleFunc = async () => {
    try {
      const promises = data.map(async (row) => {
        // 你的异步数据库提交逻辑
        await someAsyncDbOperation(row);
        // 每个异步任务完成后，递增done
        setDone(prev => prev + 1);
      });

      await Promise.all(promises);
    } catch (error) {
      console.error("提交失败:", error);
    }
  };

  return (
    <>
      {/* 假设你有触发handleFunc的按钮 */}
      <button onClick={handleFunc}>开始提交</button>
      <LinearDeterminate doneSoFar={done} allData={data} />
    </>
  );
}

子组件LinearDeterminate：

import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";

export default function LinearDeterminate({ doneSoFar, allData }) {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (allData.length === 0) {
      setProgress(0);
      return;
    }
    // 根据最新的doneSoFar计算进度，避免除以0
    const calculatedProgress = Math.min((doneSoFar / allData.length) * 100, 100);
    setProgress(calculatedProgress);
  }, [doneSoFar, allData]); // 监听doneSoFar和allData的变化

  return (
    <Box sx={{ width: "100%", mt: 2 }}>
      <LinearProgress variant="determinate" value={progress} />
    </Box>
  );
}

关键说明： #

• 用useState定义done，确保更新时触发组件重渲染，子组件能拿到最新值。
• 每个异步任务完成后再递增done，真实反映进度。
• 子组件通过useEffect监听doneSoFar和allData的变化，实时计算并更新进度，去掉多余的定时器。
• 加了Math.min确保进度不会超过100，同时处理allData为空的情况避免除以0错误。

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