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

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

组件

我在 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('请求失败');
  }
};

我来解答赞 8 收藏

反馈

2 条解答

月怡的笔记 Lv1

这个问题挺常见的，确实是个头疼的事儿。我的做法是，在组件卸载时清除定时器或者取消消息提示。虽然 message.error 是静态方法，但我们可以在组件内部维护一个标志位，确保在组件卸载后不再调用 message 方法。

你可以这样做：

首先，在组件的状态或者 ref 中定义一个标志位：

import { useRef } from 'react';

import { message } from 'antd';



const MyComponent = () => {

  const isMountedRef = useRef(true);



  // 在组件卸载时设置标志位为 false

  useEffect(() => {

    return () => {

      isMountedRef.current = false;

    };

  }, []);



  const handleFetch = async () => {

    try {

      await api.getData();

    } catch (err) {

      if (isMountedRef.current) {

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

      }

    }

  };



  // 其他组件逻辑...

};

这样，在组件卸载后，isMountedRef.current 就会被设为 false，然后在 handleFetch 的 catch 块中检查这个标志位，如果为 false，则不执行 message.error，就能避免那个警告了。希望这能帮到你！

2026-03-20 16:21

❤圆圆 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