Progress进度条加载状态不更新是怎么回事？

诸葛子诺提问于 2026-03-01 19:01:22 阅读 2

交互

我在用React做文件上传功能，进度条一直卡在0%，明明console.log里看到progress已经变了，但UI就是不动。是不是setState没生效？

我试过用useEffect监听progress，也试过把进度值转成Number，都不行。代码大概是这样：

const [uploadProgress, setUploadProgress] = useState(0);

const uploadFile = (file) => {
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      setUploadProgress(percent); // 这里log出来是30、60、90...
    }
  };
  xhr.open('POST', '/upload');
  xhr.send(file);
};

加载状态

我来解答赞 2 收藏

反馈

1 条解答

奥翔的笔记 Lv1

你这个问题八成是xhr对象在函数作用域里被回收了，或者组件重渲染的时候事件监听器丢了。最简单的办法是用useRef把xhr对象存起来。

const xhrRef = useRef(null);

const [uploadProgress, setUploadProgress] = useState(0);



const uploadFile = (file) => {

  if (xhrRef.current) {

    xhrRef.current.abort();

  }

  

  const xhr = new XMLHttpRequest();

  xhrRef.current = xhr;

  

  xhr.upload.onprogress = (e) => {

    if (e.lengthComputable) {

      setUploadProgress(Math.round((e.loaded / e.total) * 100));

    }

  };

  

  xhr.open('POST', '/upload');

  xhr.send(file);

};



// 组件卸载时清理

useEffect(() => {

  return () => {

    if (xhrRef.current) {

      xhrRef.current.abort();

    }

  };

}, []);

顺便说一句，如果你用的是Ant Design的Progress组件，记得传的是percent属性不是value，这个坑我也踩过。

2026-03-01 19:43