[t-toast] close 关闭事件导致无限弹轻提示

[Gahotx]

tdesign-miniprogram 版本

1.11.2

重现链接

https://gist.github.com/Gahotx/550b4652b8c354620dc18c0bd58d01b5

重现步骤

在一个Toast的close关闭事件中弹下一个Toast，会在第二Toast的关闭事件也触发上一个close的事件，导致无限弹第二个Toast，但如果在后面的一个Toast指定了close: () => {}，就没有这个问题

期望结果

close应该只有在指定的Toast中触发，不影响其他Toast

实际结果

Toast会触发绑定到其他Toast身上的close事件

基础库版本

No response

补充说明

No response

[github-actions]

👋 @Gahotx，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@Gahotx 从贴的代码里面看 你确实只用到了一个 #t-toast，所以出现了循环调用的问题。 试试用 hideToast() 来关闭～

import Toast, { hideToast } from 'tdesign-miniprogram/toast';

hideToast({
    context: this,
    selector: '#t-toast',
  });

[Gahotx]

@anlyyao 你的意思是close事件是绑定到标签上，而不应该在指定的Toast()方法中才触发吗？不是应该只有一个标签，可以调用多个Toast()方法，每个Toast方法有独立的close回调，互不干扰吗？

[anlyyao]

@Gahotx 你提供的这个场景的问题出现在 hide() 中，

tdesign-miniprogram/packages/components/toast/toast.ts

Line 86 in cb7ed0f

this.data?.close?.();

• 你的一个Toast（加载状态）显示时，它设置了 close() 回调函数
• 然后 第一个Toast关闭时，调用了 this.data?.close?.() ，触发了第一个 Toast 的 close 回调
• 在close回调中，你又创建了第二个Toast（成功状态）
• 第二个 Toast 没有显式设置 close 回调，但由于代码逻辑，它仍然持有对第一个Toast的close回调的引用
• 所以当第二个Toast关闭时，又调用了 this.data?.close?.() ，导致再次触发第一个Toast的close回调，从而再次显示第二个Toast
• 然后就无限循环了

如果不改源码，就只能避免使用 close 回调，来规避陷入循环的问题。
你提到的 在第二个Toast指定了close: () => {}，就没有这个问题，其实就是显式清空close回调，也是可以的。用 hideToast ，就是手动控制 Toast 的显示和隐藏，也是避免使用 close 回调，也能解决问题。

这是最快的、在使用侧避免问题问题。如果你着急使用，可以先用上面的方案。
================ 华丽分割线 =====================

我晚点改下源码、避免Toast 嵌套调用时，避免继承前一个 Toast的 close 回调

[anlyyao]

@Gahotx 修复在 #4110，可以先通过 npm i https://pkg.pr.new/tdesign-miniprogram@4110，安装使用/验收， 预计下周发版带上～

[Gahotx]

@anlyyao 好的，十分感谢(*-∀-)ノ