Gatsby集成Marketo表单偶现重复显示问题求助

我之前在类似的Gatsby+CMS集成场景中遇到过类似的视觉渲染异常问题，结合你的代码来看，大概率是Marketo表单重复初始化或者脚本执行时机冲突导致的，以下是具体的排查和解决步骤：

一、核心问题分析 #

你的自定义MarketoForm组件单独运行正常，但在Article组件中加载带脚本的动态HTML时出问题，关键矛盾点在于：

• Article组件中通过window.eval执行了从Drupal内容中提取的脚本，如果这段脚本里也包含了Marketo表单的初始化代码（比如MktoForms2.loadForm），就会和MarketoForm组件内部的初始化逻辑冲突，导致同一个表单被初始化两次——虽然最终DOM里只有一个表单元素，但Marketo的初始化过程可能会生成额外的临时UI或重复应用样式，造成视觉上的重复效果。
• 另外，MarketoForm组件的useEffect依赖是空数组，且没有清理逻辑，在组件因Article的state更新而重新渲染时，可能会重复触发表单初始化。

二、具体解决方案 #

1. 确保Marketo脚本只加载一次，避免重复初始化 #

修改MarketoForm组件的useEffect，增加脚本加载判断和表单清理逻辑，确保每个表单只被初始化一次：

import React, { useEffect, useState } from 'react'
import { Link } from "gatsby"

const MarketoForm = ({ fid }) => {
  let formId = `mktoForm_${fid}`
  const [formSuccess, setFormSuccess] = useState(false)
  let message = ''
  switch (fid) {
    case 1537: // get in touch form
      message = <> <h1>Thanks for the message!</h1> </>
      break;
    default:
      message = <> <h1>Thanks for the message!</h1> </>
      break;
  }

  useEffect(() => {
    // 仅在浏览器环境执行（避免Gatsby SSR报错）
    if (typeof window === 'undefined') return;

    const initForm = () => {
      // 先检查是否已经初始化过该表单
      const existingForm = window.MktoForms2?.getFormById(formId);
      if (existingForm) {
        existingForm.destroy(); // 销毁已有实例，避免重复
      }

      window.MktoForms2.loadForm("//app-lon03.marketo.com", "416-MPU-256", fid, function (form) {
        form.onSuccess(function (values, followUpUrl) {
          form.getFormElem().hide();
          setFormSuccess(true);
          return false;
        });
      });
    };

    // 检查Marketo脚本是否已加载
    if (window.MktoForms2) {
      initForm();
    } else {
      // 动态加载Marketo脚本，仅加载一次
      const script = document.createElement('script');
      script.src = "//app-lon03.marketo.com/js/forms2/js/forms2.min.js";
      script.async = true;
      script.onload = initForm;
      document.body.appendChild(script);
    }

    // 组件卸载时清理表单实例
    return () => {
      if (window.MktoForms2) {
        const form = window.MktoForms2.getFormById(formId);
        if (form) form.destroy();
      }
    };
  }, [fid, formId]) // 添加fid和formId作为依赖，确保fid变化时重新初始化

  return (
    <> {formSuccess ? <div> {message} </div> : <form id={formId}></form>} </>
  )
}
export default MarketoForm

2. 过滤动态脚本中的Marketo初始化代码 #

在Article组件中，执行从Drupal提取的脚本前，先过滤掉Marketo相关的初始化逻辑，避免和自定义组件冲突：

componentDidUpdate(){
  let scriptToRun = this.state.externalScript
  if (scriptToRun !== undefined && scriptToRun !== '') {
    let scriptLines = scriptToRun.split("\n")
    scriptLines.pop()
    scriptLines.shift()
    let cleanScript = scriptLines.join("\n")
    
    // 过滤掉Marketo的表单初始化代码，避免重复执行
    if (!cleanScript.includes('MktoForms2.loadForm')) {
      window.eval(cleanScript)
    }
  }
}

3. 给MarketoForm组件添加唯一key，避免不必要重渲染 #

在Article组件的render方法中，给每个MarketoForm实例添加唯一key，确保组件在父组件更新时不会被不必要地重新挂载：

render(){
  const article = this.props.data?.article;
  return (
    <> 
      <MarketoForm key="form-142" fid={142} /> 
      <MarketoForm key="form-156" fid={156} /> 
      <div dangerouslySetInnerHTML={{ __html: article?.body.processed }}> </div> 
    </>
  )
}

三、额外排查点 #

如果上述方案解决不了问题，可以再检查：

• 浏览器控制台是否有Marketo相关的报错，比如脚本加载失败、表单元素找不到等
• 查看Drupal返回的HTML内容中，是否包含了Marketo表单的容器元素（比如和你的formId重复的ID），导致DOM中存在隐藏的重复元素
• 检查Marketo的样式是否有position: absolute或z-index设置不当，导致表单被叠加渲染

内容的提问来源于stack exchange，提问作者Vivek V Nair