Arco Design的Message提示框为什么在动态内容后不显示？

UX凡敬提问于 2026-02-01 19:26:26 阅读 54

组件

大家好，我在用Arco的Message做操作反馈时遇到个奇怪的问题。当我点击按钮后先执行一个异步请求再弹出提示，Message提示框就没有显示，但控制台也没有报错。如果把Message直接放在按钮点击事件第一行就能正常显示。

我尝试过把代码简化成同步操作，发现只要在调用Message前执行过动态DOM操作（比如修改数据或更新状态），提示框就消失不见了。这是什么原因呢？以下是简化后的代码示例：


提交


const handleClick = async () => {
  // 模拟异步操作
  await new Promise(resolve => setTimeout(resolve, 500));
  // 这里弹出的Message不显示
  message.success('操作成功');
};

如果直接写成message.success(‘测试’)就能正常显示，但和异步操作放在一起就失效了。是不是需要特别处理异步场景？或者有什么调用顺序需要注意的地方？

我来解答赞 7 收藏

反馈

2 条解答

南宫秀玲 Lv1

兄弟，这个问题我也踩过坑，确实是 Arco Design 的 Message 组件在异步场景下容易出幺蛾子。根本原因在于 Message 的挂载机制：它是通过动态创建 DOM 节点来显示的，而如果你在异步操作中修改了页面状态（比如触发了 Vue/React 的重新渲染），可能会导致它刚挂载的 DOM 被意外移除。

我的血泪教训是：一定要确保 Message 弹出时，页面的状态是稳定的。你可以试试下面这两种方法：

### 方法一：延迟弹出
给 Message 弹出加个极短的延时，让它等页面渲染稳定后再执行：

const handleClick = async () => {

  await new Promise(resolve => setTimeout(resolve, 500));

  setTimeout(() => {

    message.success('操作成功');

  }, 0);

};

### 方法二：手动指定挂载节点
告诉 Message 把提示框挂载到一个不会被轻易清除的地方，比如 body 上：

message.success({

  content: '操作成功',

  mountContainer: () => document.body

});

我个人推荐第二种方法，因为它更优雅，不会引入额外的定时器。记得这招，以后遇到类似问题就心里有底了！

2026-02-02 08:07

育柯~ Lv1

应该是 Arco Design 的 Message 组件在异步操作后被 DOM 更新覆盖了。解决方法是用 nextTick 确保 DOM 更新完成后再调用 Message。修改你的代码如下：

const handleClick = async () => {

  await new Promise(resolve => setTimeout(resolve, 500));

  await this.$nextTick(); // 确保 DOM 更新完成

  message.success('操作成功');

};

如果不用 Vue，可以用 requestAnimationFrame 达到类似效果。

2026-02-01 20:04