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

诸葛子诺 阅读 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 条解答
奥翔的笔记
你这个问题八成是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,这个坑我也踩过。
点赞 2
2026-03-01 19:43