fix: add mountedRef guards for async state updates + move play success msg to .then()

2026-07-30 10:14:30 +08:00
parent c11c05ec4d
commit 7e50baed40
1 changed files with 16 additions and 5 deletions
@@ -29,7 +29,12 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
    getTtsVoices()
      .then((v) => setVoices(v))
      .catch(() => message.error("加载音色列表失败"))
-      .finally(() => setVoicesLoading(false))
+      .finally(() => {
+        if (mountedRef.current) setVoicesLoading(false)
+      })
+    return () => {
+      mountedRef.current = false
+    }
  }, [open])

  /* ── 切换配音模式 ── */
@@ -108,15 +113,21 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
      audioRef.current?.pause()
      const audio = new Audio(res.audio_url)
      audioRef.current = audio
-      audio.play().catch(() => message.error("播放失败"))
+      audio
+        .play()
+        .then(() => {
+          if (mountedRef.current) message.success("试听播放中")
+        })
+        .catch(() => {
+          if (mountedRef.current) message.error("播放失败")
+        })
      audio.onended = () => {
        if (mountedRef.current) audioRef.current = null
      }
-      message.success("试听播放中")
    } catch {
-      message.error("试听生成失败")
+      if (mountedRef.current) message.error("试听生成失败")
    } finally {
-      setPreviewLoading(false)
+      if (mountedRef.current) setPreviewLoading(false)
    }
  }, [config])