Ant Design 的 message 为什么在组件卸载后还会报错？

轩辕家豪提问于 2026-03-05 13:35:18 阅读 24

组件

我在 React 组件里用 message.error() 提示错误，但有时候用户操作太快，组件已经卸载了，message 还在显示，控制台就报 Warning：Can’t perform a React state update on an unmounted component。

我试过在 useEffect 里加个 isMounted 标志判断，但 message 是静态方法，好像没法直接取消。有没有办法安全地避免这个警告？

比如这样调用的：

const handleFetch = async () => {
  try {
    await api.getData();
  } catch (err) {
    message.error('请求失败');
  }
};

我来解答赞 5 收藏

反馈

1 条解答

❤圆圆 Lv1

啊这个问题我也踩过坑。Ant Design 的 message 组件确实会有这个问题，因为它是全局单例的，不会随组件卸载自动销毁。

官方文档里其实有提到这个，推荐用 message.destroy() 手动清理。不过更好的做法是在组件卸载时取消所有 message。可以这样改：

const handleFetch = async () => {

  try {

    await api.getData();

  } catch (err) {

    if (!isMounted.current) return; // 组件已卸载就不执行了

    message.error('请求失败');

  }

};



// 在组件卸载时

useEffect(() => {

  return () => {

    message.destroy(); // 清理所有message

  };

}, []);

或者更保险的做法是用 message.config 设置 maxCount 为1，这样就不会堆积太多消息：

message.config({

  maxCount: 1

});

说实话这种全局状态管理的问题在React里挺常见的，我们组现在都改用自定义hook来封装message了，这样更好控制生命周期。

2026-03-05 14:10