javascript - React从加载异步的外部.js获取数组

我想在我的反应应用程序中加载另一个包含可变数组的.js文件

arrayCode.js
var arrayCode=["1","2","3","4","5"];

in component.js

componentDidMount() {
const script = document.createElement("script");

        script.src = "/arrayCode.js";
        script.async = true;

        document.body.appendChild(script);

}

以及如何在组件状态下加载arrayCode。

最佳答案

如果您的arrayCode.js始终是一个简单的数组，我建议您将其更改为arrayCode.json，然后使用GET请求检索json并使用内置的JSON.parse对其进行解析。

就是说，如果出于某些特定原因而需要将其作为.js文件，则始终可以对响应执行GET和eval。

componentWillMount() {
    fetch('/arrayCode.js')
        .then(res => res.text())
        .then(text => {
            eval(text);

            // You now have access to arrayCode var
            console.log(arrayCode);
            this.setState({
                array: arrayCode
            })
        });
}

如果可以将arrayCode.js移至arrayCode.json，则arrayCode.json看起来像

["1","2","3","4","5"]

并且您的componentWillMount可以成为：

componentWillMount() {
    fetch('/arrayCode.json')
        .then(res => res.json())
        .then(json => {
            const array = JSON.parse(json);

            // You now have access to arrayCode var
            console.log(array);
            this.setState({
                array,
            })
        });
}