解决message（antd-design组件库）弹窗多次数出现的问题

旧城等待， 2023-10-12 09:51 3阅读 0赞

当我们多次点击按钮的时候，会出现下图这样的情况：

网址： [全局提示 Message - Ant Design][Message - Ant Design]

![4b64c9c87b6e40cbb0a32d940327beb1.png][]

这样看起来，会降低用户的体验。所以，我想要的效果是，点一次出现一次，当我再次点击的时候，会销毁上次的，出现本次的。也就是说点一次，就出现一个提示。

解决问题的核心代码：

*message.destroy();*

*message.success("删除成功");*

**本地验证**

参考文章【[react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [全局提示 Message - Ant Design][Message - Ant Design] 中下述代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地点击按钮【Success】，在本地复现上述message弹窗多次数出现的现象。

![c51c52abac674a96b207ce65dadebb4b.png][]

在success 函数中添加一行代码【messageApi.destroy();】，再点击按钮【Success】，message弹窗多次数出现的现象消失，但是点击按钮【Error】或【Warning】message弹窗多次数出现的现象依然存在。

const success = () => \{

*messageApi.destroy();*

messageApi.open(\{

type: 'success',

content: 'This is a success message',

\});

\};

本文参考了文章： [解决message（antd-design组件库）弹窗多次数出现的问题\_js 仿ant.design气泡弹窗\_一枚程序鱼的博客-CSDN博客][message_antd-design_js _ant.design_-CSDN]

[Message - Ant Design]: https://ant.design/components/message-cn#components-message-demo-hooks
[4b64c9c87b6e40cbb0a32d940327beb1.png]: https://img-blog.csdnimg.cn/4b64c9c87b6e40cbb0a32d940327beb1.png
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[c51c52abac674a96b207ce65dadebb4b.png]: https://img-blog.csdnimg.cn/c51c52abac674a96b207ce65dadebb4b.png
[message_antd-design_js _ant.design_-CSDN]: https://blog.csdn.net/congxue666/article/details/123019276