0

我是 ReactJS 的超级新手。我正在尝试将第三方脚本文件分配给我的 Window 对象，如下面的代码在我的 componentDidmount 方法中。

        const script = document.createElement("script");
        script.src = "www.xxx.com/src/data.js";
        script.async = true;
        document.body.appendChild(script);
        console.log(window);

从上一个控制台日志中，我得到了包含第三方脚本数据的完整窗口对象。但接下来我尝试在上述代码之后的同一组件中将该数据设置为我的状态，如下所示。

           this.setState({
                dataBook: window.databook,
                dataTopic: window.datatopic
            })

但状态分配为未定义。我也尝试使用 Helmet 和 script-tag npm。我觉得我做得不对。如何从窗口对象中检索数据？谢谢 完整的组件

import React from 'react';
import './App.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url:"https://example.com/src/customdata.js",
            dataBook: [],
            dataTopic: [],
            dataLesson: [],
            dataGloss: []
        }
    }

    componentDidMount() {
        const script = document.createElement("script");
        script.src = this.state.url;
        script.async = true;
        document.body.appendChild(script);
        console.log(window);

        this.setState({
                dataBook: window.databook,
                dataTopic: window.datatopic,
                dataLesson: window.datalesson,
                dataGloss: window.datagloss
            })
    }

    render() {
        return (
            <div className="App">
                <div>Book Titles</div>
                {
                    window.databook.map((item)=>{
                        console.log(item)
                    })
                }
                <hr/>

            </div>
        );
    }

}

export default App;
4

0 回答 0