负载两次从脚本中使用的效果效果渲染表？

Question

我在下一个网站中使用hubspot表单 - 我想在代码中看到的页面加载上的表单。

不期望的效果是表格呈现两次，我想在系统中构建，因此仅在页面加载上呈现，这就是这样。我该如何实现？

我试图遵循它来解决它，但不起作用 https://www.youtube.com/观看？v = kzh6yxw0zw4 。

下面的代码

    useEffect(() => {
        let isCancelled = false;

        const script = document.createElement('script');
        script.src = "//js-eu1.hsforms.net/forms/v2.js";
        document.body.appendChild(script)
        
        if (!isCancelled) {
            script.addEventListener('load', () => {
                if (window.hbspt){
                    hubspotForm();
                }
            })
        }

        return () => {
            isCancelled = true
        };
    }, [])

Answer 1

删除严格模式是您不喜欢的。我相信，如果您这样做：

  useEffect(() => {


    const script = document.createElement('script');
    script.src = "//js-eu1.hsforms.net/forms/v2.js";
    document.body.appendChild(script)
    const listener=() => {
            if (window.hbspt){
                hubspotForm();
            }
        }
        script.addEventListener('load', listener)


    return () => {
       script.removeEventListener('load',listener)
    };
}, [])

它应该很好。我准备了有关该主题的详细说明（为什么使用效果是两次运行以及如何处理。 >在这里如果您可能想看看。删除严格模式是一种简单的方式，但您不应该选择它。

Answer 2

从您的索引中删除严格的模式，这应该可以解决问题。

Answer 3

检查React和React-dom的版本
如果您使用的是React V18的最后版本。由于具有严格的模式和同时渲染功能，因此执行usefeft（）挂钩即使设置一个空的依赖项数组，也可以运行两倍。

您可以从next.config.js文件禁用React strictmode，

这应该有助于解决您的问题

Answer 4

您可以做类似的事情：

useEffect(() => {
  // check whether the script is present already
  if (document.getElementById('your-script-id')) return;
  
  let isCancelled = false;

  const script = document.createElement('script');
  // add an id here
  script.id = "your-script-id";

  // the rest of your code
}

另外，检查您是否不重新安装组件，两次触发脚本的事实表明，在组件外部的某个地方重新安装了负载，这可能会导致性能问题。