如何阻止第三方 Javascript 加载到清理功能中？

问题描述

我一直在尝试在我的 Gatsby 站点上加载 Marketo 表单，并且我在 Stack Overflow 上找到了一些有关如何执行此操作的有用提示，但是在所有示例中，都有一个我似乎无法理解的问题来解决。

这是组件：

import React from 'react'
import useMarketo from '../../hooks/useMarketo'

export default function MarketoForm({ formId }) {
    const baseUrl = '//XXX-XXX.marketo.com'
    const munchkinId = 'XXX-XXX-XXX'

    useMarketo(baseUrl,munchkinId,formId)

    return <form id={`mktoForm_${formId}`} />
}

这是钩子：

import { useState,useEffect } from 'react'

function appendScript(baseUrl,setScriptLoaded) {
    if (window.MktoForms2) return setScriptLoaded(true)

    const script = document.createElement('script')
    script.src = `${baseUrl}/js/forms2/js/forms2.min.js`
    script.onload = () => (window.MktoForms2 ? setScriptLoaded(true) : null)
    document.body.appendChild(script)
}

export default function useMarketo(baseUrl,formId) {
    const [formIsLoaded,setFormIsLoaded] = useState(false)
    const [scriptLoaded,setScriptLoaded] = useState(false)

    useEffect(() => {
        if (scriptLoaded && !formIsLoaded) {
            const windowGlobal = typeof window !== 'undefined' && window
            windowGlobal.MktoForms2.loadForm(baseUrl,formId).whenRendered(setFormIsLoaded(true))
            return
        }
        appendScript(baseUrl,setScriptLoaded)
    },[formIsLoaded,scriptLoaded,baseUrl,formId])
}

问题是如果我离开页面并快速返回，表单将加载多次。

Marketo Form appears many times

我不知道如何在 useEffect 函数中清理它。问题是 loadForm 函数还没有返回，当我离开页面然后返回时，它实际上得到了返回，然后发出另一个请求。

我似乎无法找到解决此使用状态或清理功能的方法。 AbortController() 看起来很有希望，但我也找不到解决方案。不过，这似乎应该很容易解决。我不是第一个遇到这个问题的人，因为它以前在这里以及 Marketo 论坛上出现过 - 但我还没有找到合适的解决方案。

提前感谢您的建议！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

marketo reactjs reactjs use-effect