React page.js组件嵌入第三方表单后无法正常渲染问题求助

• 核心问题：你在script.onload回调内声明的ss_form是局部作用域变量，第三方表单脚本依赖全局window.ss_form读取配置完成初始化，无法读取局部变量导致渲染逻辑未触发。
• 其他潜在问题：未做脚本重复加载判断、未处理组件卸载时的副作用清理，可能导致重复渲染或内存泄漏。

import React, { useEffect } from "react";

function Contact() {
  useEffect(() => {
    // 避免重复加载脚本
    if (window.ss_form || document.querySelector('script[src*="marketingautomation.services/client/form.js"]')) {
      return
    }

    const script = document.createElement('script');
    script.src = 'https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1';
    script.async = true;

    script.addEventListener('load', () => {
      // 把配置挂载到全局window上，供第三方脚本读取
      window.ss_form = {
        'account': 'MzawMDE3tzQzBQA', 
        'formID': 'M0xNNjW2TDXSTUozMNI1MU421U00Sk7UTU5OTbJIs0wyTrVMBAA'
      };
      window.ss_form.width = '100%';
      window.ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
      window.ss_form.target_id = 'form'; 
      window.ss_form.polling = true; 
    });

    document.body.appendChild(script);

    // 组件卸载时清理副作用
    return () => {
      document.body.removeChild(script);
      delete window.ss_form;
    }
  }, []);
    
  return (
    <main>
      <div id="form"></div>
    </main>
  );
}

export default Contact;

如果修改后仍未渲染，可以按以下顺序排查：

1. 打开浏览器控制台，查看是否有跨域、资源加载失败、JS运行报错信息
2. 检查页面是否存在多个id="form"的元素，导致第三方脚本挂载到了错误节点
3. 检查是否有CSS规则（比如display: none、opacity: 0、z-index层级过低）导致表单被隐藏

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