React加载Marketo第三方脚本后调用MktoForms2提示未定义求助

问题根源分析 #

你的代码存在几个关键错误，直接导致MktoForms2无法被正确识别：

• 变量名拼写错误：创建脚本时声明的变量是script，后续赋值属性却误用了未定义的s，导致脚本元素无法正确设置标识，甚至触发报错中断加载流程。
• useEffect缺少依赖控制：第一个useEffect未设置依赖数组，会在组件每次渲染时重复执行，可能引发重复加载脚本的问题。
• 未判断状态就执行加载：第二个useEffect在loaded变化时直接执行，初始loaded=false阶段就会调用MktoForms2.loadForm，此时脚本还未加载完成，必然出现undefined。
• 域名不匹配导致跨域：加载的脚本域名与调用表单的域名不一致，可能导致MktoForms2无法正确挂载到全局window对象。

修正后的代码 #

修复后的Marketo脚本加载函数

//加载Marketo脚本（若不存在）
const loadMarketoScript = (callback) => {
  const existingScript = document.getElementById('mktoForms');
  
  if (!existingScript) {
    const script = document.createElement('script');
    script.id = "mktoForms";
    script.type = "text/javascript";
    script.async = true;
    // 统一为表单对应的域名，避免跨域问题
    script.src = "//748-KKO-677.mktoweb.com/js/forms2/js/forms2.min.js";

    document.getElementsByTagName("head")[0].appendChild(script);
    script.onload = () => { 
      callback?.();
    };
    // 增加错误处理，避免加载失败时无提示
    script.onerror = () => {
      console.error('Marketo脚本加载失败');
    };
  } else {
    callback?.();
  }
};

export default loadMarketoScript;

页面调用代码修正

const [loaded, setLoaded] = useState(false);

// 仅在组件挂载时执行一次脚本加载
useEffect(() => {
  loadMarketoScript(() => {
    setLoaded(true);
  });
}, []); // 空依赖数组确保仅执行一次

useEffect(() => {
  // 仅当脚本加载完成后才执行表单初始化
  if (loaded && window.MktoForms2) {
    MktoForms2.loadForm("//748-KKO-677.mktoweb.com", "748-KKO-677", 1169);
  } else if (loaded) {
    console.error('MktoForms2未正确挂载到全局对象');
  }
}, [loaded]);

额外验证步骤 #

1. 打开浏览器控制台，查看是否有脚本加载失败的报错信息。
2. 在网络面板确认Marketo脚本返回状态码为200，已成功加载。
3. 脚本加载完成后，在控制台输入window.MktoForms2，确认该对象存在。

内容的提问来源于stack exchange，提问作者TigerCode