Gatsby集成Marketo表单时，如何在useEffect清理函数中阻止第三方JS重复加载致表单多次渲染？

• 无组件存活校验：所有Marketo脚本加载、表单渲染的异步回调，触发时未判断当前组件是否已卸载，哪怕组件导航离开，回调仍会执行DOM插入操作，叠加多次未取消的异步流程就会出现表单堆叠
• 副作用依赖设计不合理：原hook把内部状态formIsLoaded放进useEffect依赖数组，状态更新会反复触发副作用执行，叠加多次loadForm请求
• 全局脚本加载无幂等控制：原脚本加载逻辑仅判断全局window.MktoForms2是否存在，未处理正在加载中的状态，快速导航会重复插入脚本、重复触发加载回调
• 无DOM残留清理：loadForm渲染前未清空目标容器的历史内容，重复触发时会直接把新表单追加到容器里
• 回调传参写法错误：原代码将setFormIsLoaded(true)直接传入whenRendered，导致状态更新在表单渲染前就被触发，进一步加剧副作用循环

核心思路：不需要强行取消Marketo内部的异步请求，只需要在所有异步回调触发时，先校验组件存活状态，再执行后续DOM操作和状态更新；同时做好副作用去重、全局脚本加载的幂等控制。

具体调整点 #

1. 用useRef维护组件存活标记，在useEffect清理函数中把标记设为false，所有异步回调触发时先校验标记，组件已卸载则直接终止操作
2. 全局维护Marketo核心脚本的加载状态，避免重复插入脚本、重复绑定加载回调
3. 调整useEffect依赖数组，仅保留外部传入的baseUrl、munchkinId、formId，移除不必要的内部状态依赖
4. 每次调用loadForm前，先清空目标表单容器的历史内容，避免渲染残留
5. 修正whenRendered的回调传参，确保状态更新在表单实际渲染完成后再触发

调整后的Hook实现 #

import { useState, useEffect, useRef } from 'react'

// 全局维护Marketo脚本加载状态，实现幂等加载
let mktoScriptLoading = false
let mktoScriptReady = false

function loadMktoScript(baseUrl, onReady) {
  // 脚本已加载完成，直接执行回调
  if (mktoScriptReady && window.MktoForms2) {
    return onReady()
  }
  // 脚本正在加载，绑定到全局加载完成事件，避免重复插入script标签
  if (mktoScriptLoading) {
    window.addEventListener('mktoScriptReady', onReady, { once: true })
    return
  }

  mktoScriptLoading = true
  const script = document.createElement('script')
  script.src = `${baseUrl}/js/forms2/js/forms2.min.js`
  script.onload = () => {
    mktoScriptLoading = false
    mktoScriptReady = true
    // 通知所有等待脚本加载的回调
    window.dispatchEvent(new Event('mktoScriptReady'))
    onReady()
  }
  document.body.appendChild(script)
}

export default function useMarketo(baseUrl, munchkinId, formId) {
  const [formIsLoaded, setFormIsLoaded] = useState(false)
  // 组件存活标记
  const isMountedRef = useRef(true)

  useEffect(() => {
    isMountedRef.current = true
    setFormIsLoaded(false)

    loadMktoScript(baseUrl, () => {
      // 脚本加载完成后，先校验组件是否仍存活
      if (!isMountedRef.current || !window.MktoForms2) return

      const formContainer = document.getElementById(`mktoForm_${formId}`)
      if (!formContainer) return
      // 清空容器内的历史渲染残留
      formContainer.innerHTML = ''

      window.MktoForms2.loadForm(baseUrl, munchkinId, formId)
        .whenRendered(() => {
          // 表单渲染完成后，再次校验组件存活状态
          if (!isMountedRef.current) return
          setFormIsLoaded(true)
        })
    })

    // 组件卸载时的清理逻辑
    return () => {
      isMountedRef.current = false
    }
    // 仅依赖外部传入的固定参数，避免内部状态触发重复副作用
  }, [baseUrl, munchkinId, formId])

  return { formIsLoaded }
}

• AbortController在这里没有实际作用：Marketo的loadForm请求是其SDK内部发起的，外部无法通过AbortController主动中断这些请求。问题的核心不是要取消请求，而是请求返回后不要对已卸载的组件执行无效的DOM操作，用存活标记校验就能解决快速导航下的重复渲染问题
• 不要在useEffect的依赖数组中加入仅用于内部状态的formIsLoaded：这类内部状态的更新会触发副作用的反复执行，反而会放大重复加载的问题

内容的提问来源于stack exchange，提问作者KJ O'Brien