加载外部脚本触发React错误#321（无效Hook调用）求解决方案

我尝试在HTML元素渲染完成后加载外部脚本，测试代码如下（setTimeout仅用于测试）：

const loadScript = async () => {
    const script = document.createElement('script')
    script.async = true
    console.log('loading')

    script.src = 'https://widgets.sportmonks.com/js/team/nextFixture.js'
    document.body.appendChild(script)
};

useEffect(() => {
    if (window && document) {
        try {
            setTimeout(() => {
                loadScript()
            }, 5000)
        } catch (e) {
            console.log(e, 'error')
        }
    }
}, [])

执行loadScript并将脚本添加至DOM时，触发React压缩错误#321：无效的Hook调用。Hook只能在函数组件的主体内部调用，错误源自外部脚本内部。

已尝试调整超时时间和加载顺序，问题依旧；且已确认不存在React版本重复的情况。补充说明：外部脚本中存在一个名为useState的函数，推测是导致错误触发的原因。

解决方案 #

1. 用iframe隔离外部脚本（推荐） #

将外部脚本加载到独立的iframe中，让它和你的React应用处于不同的作用域，从根源避免Hook冲突：

const loadScriptInIframe = () => {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    // 在iframe内部创建并加载脚本
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    const script = iframeDoc.createElement('script');
    script.src = 'https://widgets.sportmonks.com/js/team/nextFixture.js';
    script.async = true;
    iframeDoc.body.appendChild(script);
};

useEffect(() => {
    if (window && document) {
        setTimeout(() => {
            loadScriptInIframe();
        }, 5000);
    }
}, []);

2. 临时重命名全局React Hook（风险较高） #

在加载外部脚本前，临时替换全局的React.useState，脚本加载完成后恢复原始方法：

const loadScript = async () => {
    // 保存原始的useState
    const originalUseState = window.React?.useState;
    // 临时替换，避免外部脚本错误调用
    if (originalUseState) {
        window.React.useState = () => [null, () => {}];
    }

    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://widgets.sportmonks.com/js/team/nextFixture.js';
    
    // 脚本加载完成/失败后恢复原始方法
    const restoreUseState = () => {
        if (originalUseState) window.React.useState = originalUseState;
    };
    script.onload = restoreUseState;
    script.onerror = restoreUseState;

    document.body.appendChild(script);
};

useEffect(() => {
    if (window && document) {
        setTimeout(() => {
            loadScript();
        }, 5000);
    }
}, []);

注意：这种方法可能破坏外部脚本的正常功能，仅在iframe方案不可行时尝试。

3. 尝试动态导入脚本（依赖脚本支持） #

如果外部脚本支持模块加载，用import()动态导入，避免污染全局作用域：

useEffect(() => {
    setTimeout(async () => {
        try {
            await import('https://widgets.sportmonks.com/js/team/nextFixture.js');
        } catch (e) {
            console.log(e, 'error');
        }
    }, 5000);
}, []);

若脚本不支持模块规范，此方法无效。

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