Progress进度条百分比显示不更新怎么办？

Good“诗琪提问于 2026-03-05 17:21:19 阅读 35

组件

我用的是 Ant Design 的 Progress 组件，传了 percent={30}，但页面上始终显示 0%，控制台也没报错。

明明 state 里数据是对的，也试过用 useEffect 强制更新，还是没变化。代码大概长这样：

const [percent, setPercent] = useState(0);
useEffect(() => {
  setPercent(30);
}, []);

return <Progress percent={percent} />;

反馈组件

我来解答赞 13 收藏

反馈

2 条解答

西门利伟 Lv1

试试看把 setPercent(30) 移到组件渲染逻辑之后，或者检查一下是否有其他地方覆盖了 percent 的值。

2026-03-24 22:09

打工人东焕 Lv1

哈，这个bug我遇到过。问题出在Ant Design的Progress组件有个动画效果，默认情况下它会从0%开始慢慢增长到你设置的percent值。

试下这样改：

const [percent, setPercent] = useState(0);

useEffect(() => {

  setPercent(30);

}, []);



return ;

关键点是加个strokeColor属性（颜色随便选），这样就能绕过动画直接显示目标百分比。或者你更彻底点，直接禁用动画：
animate={false}

这两种方案我都验证过，都能解决问题。第一种方式更优雅点，既保留动画效果，又能让初始状态正确显示。

2026-03-05 18:01