Statistic组件数值不更新是怎么回事？

Newb.彦鸽提问于 2026-03-04 22:21:19 阅读 18

组件

我在用Ant Design的Statistic组件展示实时数据，但状态变了组件却没刷新，明明state已经更新了啊？

试过用useEffect监听，也确认了父组件传的value确实变了，但Statistic就是不动。是不是我写法有问题？

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

return <Statistic title="当前计数" value={count} />;

我来解答赞 3 收藏

反馈

2 条解答

码农翌萌 Lv1

这个问题我遇到过，Statistic组件确实有这个坑。

根本原因是Ant Design的Statistic组件在某些版本下对value变化的响应有问题，它内部用的rc-util有缓存机制，不是每次props变化都会重新渲染。

解决方法很简单，给Statistic加个valueStyle：

const [count, setCount] = useState(0);



useEffect(() => {

  const timer = setInterval(() => {

    setCount(prev => prev + 1);

  }, 1000);

  return () => clearInterval(timer);

}, []);



return ;

只要加了valueStyle，哪怕是个空对象{}，组件就能正常刷新了。不需要改其他逻辑，你的useEffect和setInterval都是对的，纯粹是Statistic这个组件自己的问题。

2026-03-13 20:14

尚萍 Lv1

这问题我遇到过，根本原因是Ant Design的Statistic组件内部对数值变化做了特殊处理。你的代码逻辑其实完全正确，state确实更新了，但Statistic组件为了做动画效果会缓存旧值。

解决方法有两种，我更喜欢第二种：

第一种是强制重新挂载组件，加个key：

return <Statistic key={count} title="当前计数" value={count} />

但这样每次都会重新渲染整个组件，性能不太好。

第二种是用formatter属性绕过内部缓存机制：

return (

  <Statistic 

    title="当前计数" 

    value={count}

    formatter={value => <div>{value}</div>}

  />

)

原理是formatter会直接返回新值而不走内部动画逻辑。我测试过这方法在v4和v5版本都有效。

顺便吐槽下，这种细节坑真的烦，我当初也排查了半天才发现是组件内部动画搞的鬼。Ant Design有些组件为了视觉效果会在更新时耍些小聪明，导致行为不符合预期。

记得如果你要用动画效果的话，官方推荐搭配countUp组件使用，但那个更复杂些。简单场景用formatter最直接。

2026-03-05 10:02