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

Tr° 景景提问于 2026-03-19 23:14:20 阅读 4

组件

我在用 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} />;

我来解答赞 11 收藏

反馈

1 条解答

欧阳利君 Lv1

这个问题大概率是你给 Statistic 组件加了 key 属性，而且 key 是个固定值。

当组件的 key 保持不变时，React 会认为这是同一个组件，直接复用实例，不会触发重新渲染。你的 state 确实变了，但组件拿到的新 value 根本没机会重新渲染。

检查一下你的代码里有没有类似这样的写法：

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

如果有，去掉 key 或者改成动态的：

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

// 或者

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

如果你确实需要 key 来触发某些重置逻辑（比如重置动画），那每次 value 变化时 key 也得跟着变。

你的代码本身逻辑没问题，setInterval 正常触发，count 正常更新，Statistic 组件本身也应该正常响应。排除掉 key 的问题，应该就OK了。

2026-03-19 23:16