react.js - 动态引入script报错怎么解决？

Question

循环调用一组函数，动态引入script，在检查元素中的head中script显示已经被引入，但是onload函数没有被执行，并且报错如下：

export async function loadScripts(scripts: string[], callback: any) {
    let HEAD = document.getElementsByTagName('head')[0]
    let s = [];
    let loaded = 0;
    for (let i = 0; i < scripts.length; i++) {
        s[i] = document.createElement('script');
        s[i].setAttribute('type', 'text/label'); 
        s[i].setAttribute('src', scripts[i]);
        s[i].onload = () => {
            // error: Function declared in a loop contains unsafe references to variable(s) 'loaded'
            loaded++;
            if (loaded === scripts.length) {
                callback()
            }
        };
        HEAD.appendChild(s[i]);
    }
}

Answer 1

这是个啥类型？你打算让浏览器按什么规则去解析它？

P.S.1 那是个 eslint 警告，闭包问题，你应该用一个立即执行函数包裹执行。你也可以选择忽略它，其实你这么写没啥问题，你又不拿它当返回值。但 eslint 比较死板。

P.S.2 想拿 head 元素，直接用 document.head 就好了。

Answer 2

export async function loadScripts(scripts: string[], callback: any) {
    let HEAD = document.getElementsByTagName('head')[0]
    let s = [];
    let loaded = 0;
    for (let i = 0; i < scripts.length; i++) {
        s[i] = document.createElement('script');
        s[i].setAttribute('type', 'text/label'); 
        s[i].setAttribute('src', scripts[i]);
        s[i].onload = (function(index) {
            return function() {
                loaded++;
                if (loaded === scripts.length) {
                    callback()
                }
            }
        })(i);
        HEAD.appendChild(s[i]);
    }
}

Answer 3

你注释的那个报错是eslint的规则no-loop-func导致的

不过你下面的代码也有问题呀，执行必报错，c[i] 是 undefined，c[i].onload 浏览器会提示

Uncaught TypeError: Cannot set properties of undefined (setting 'onload')