Javascript 将异步加载端与React接口通信

有一个名为JSONHeader的类，它让服务器加载每个JSON：

import jQuery from 'jquery-ajax';
import Atlas from "./Atlas";

export default class JSONHeader {
    constructor(location) {
        loadAtlasStructure(location);

        function loadAtlasStructure(location) {
            jQuery.ajax({
                dataType: "json",
                url: location,
                async: true,
                success: function (files) {
                    files.map((file) => {
                        jQuery.ajax({
                            dataType: "json",
                            url: location + file,
                            async: true,
                            success: function (data) {
                                console.log(data);
                                if (!window.IndexAtlas) {
                                    window.IndexAtlas = new Atlas();
                                }
                                window.IndexAtlas.addSubAtlas(data);
                                console.log('JSONHeader::window.IndexAtlas', window.IndexAtlas);
                            }
                        });
                    })
                }
            })
        }
    }
}

我想在加载所有json之后，将React的顶级组件App从isLoading:true更改为isLoading:false。我们怎样才能做到这一点？。目前，每次重新加载所有JSON时，我都会被迫等待5秒

import React, {Component} from 'react';
import BrowserRouter from "react-router-dom/es/BrowserRouter";
import Switch from "react-router-dom/es/Switch";
import Route from "react-router-dom/es/Route";
import Redirect from "react-router-dom/es/Redirect";
import ScenePage from "../ScenePage/index";
import CoverPage from "../CoverPage/index";
import {INDEX, SCENE_PAGE} from "../../constantRoutes";
import JSONHeader from "../../newModel14Junio/JSONHeader";

export default class App extends Component {
    constructor(props) {
        super(props);

        const header = new JSONHeader('/atlas/json/');

        this.state = {
            isAtlasLoading: true
        };

        setTimeout(() => {
            this.setState({isAtlasLoading: false});
        }, 5000);
    }

    render() {
        if (this.state.isAtlasLoading) {
            return (<div>Atlas loading</div>);
        }
        return (
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route exact path={INDEX} component={CoverPage}/>
                        <Route path={SCENE_PAGE} component={() => <ScenePage IndexAtlas={window.IndexAtlas}/>}/>
                        <Redirect from="*" to={INDEX}/>
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

import React，{Component}来自'React'；
从“react router dom/es/BrowserRouter”导入BrowserRouter；
从“react router dom/es/Switch”导入交换机；
从“反应路由器dom/es/Route”导入路由；
从“react router dom/es/Redirect”导入重定向；
从“./ScenePage/index”导入场景页面；
从“./封面/索引”导入封面；
从“../../constantRoutes”导入{INDEX，SCENE_PAGE}；
从“../../newModel14Junio/JSONHeader”导入JSONHeader；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
const header=newjsonheader（'/atlas/json/'）；
此.state={
伊萨特拉斯洛丁：是的
};
设置超时（（）=>{
this.setState（{isatlasload:false}）；
}, 5000);
}
render（）{
if（this.state.isAtlasLoading）{
返回（图集加载）；
}
返回(
}/>
);
}
}

---

谢谢您的帮助。

使用超时来完成此操作不是一个好主意，因为您不知道完成此操作需要花费多少时间。因此，您可以向JSONHeader添加回调，如下所示：

import jQuery from 'jquery-ajax';
import Atlas from "./Atlas";

export default class JSONHeader {
    constructor(location, callback) {
        loadAtlasStructure(location);

        function loadAtlasStructure(location, callback) {
            jQuery.ajax({
                dataType: "json",
                url: location,
                async: true,
                success: function (files) {
                    files.map((file) => {
                        jQuery.ajax({
                            dataType: "json",
                            url: location + file,
                            async: true,
                            success: function (data) {
                                console.log(data);
                                if (!window.IndexAtlas) {
                                    window.IndexAtlas = new Atlas();
                                }
                                window.IndexAtlas.addSubAtlas(data);
                                console.log('JSONHeader::window.IndexAtlas', window.IndexAtlas);
                                callback();
                            }
                        });
                    })
                }
            })
        }
    }
}

在ReactJS中，您只需创建一个回调并在调用JSONHeader时传递它：

import React, {Component} from 'react';
import BrowserRouter from "react-router-dom/es/BrowserRouter";
import Switch from "react-router-dom/es/Switch";
import Route from "react-router-dom/es/Route";
import Redirect from "react-router-dom/es/Redirect";
import ScenePage from "../ScenePage/index";
import CoverPage from "../CoverPage/index";
import {INDEX, SCENE_PAGE} from "../../constantRoutes";
import JSONHeader from "../../newModel14Junio/JSONHeader";

export default class App extends Component {
    constructor(props) {
        super(props);

        const finishCallback = () => {
            this.setState({isAtlasLoading: false});
        };

        const header = new JSONHeader('/atlas/json/', finishCallback);

        this.state = {
            isAtlasLoading: true
        };        
    }

    render() {
        if (this.state.isAtlasLoading) {
            return (<div>Atlas loading</div>);
        }
        return (
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route exact path={INDEX} component={CoverPage}/>
                        <Route path={SCENE_PAGE} component={() => <ScenePage IndexAtlas={window.IndexAtlas}/>}/>
                        <Redirect from="*" to={INDEX}/>
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

import React，{Component}来自'React'；
从“react router dom/es/BrowserRouter”导入BrowserRouter；
从“react router dom/es/Switch”导入交换机；
从“反应路由器dom/es/Route”导入路由；
从“react router dom/es/Redirect”导入重定向；
从“./ScenePage/index”导入场景页面；
从“./封面/索引”导入封面；
从“../../constantRoutes”导入{INDEX，SCENE_PAGE}；
从“../../newModel14Junio/JSONHeader”导入JSONHeader；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
const finishCallback=（）=>{
this.setState（{isatlasload:false}）；
};
const header=newjsonheader（'/atlas/json/'，finishCallback）；
此.state={
伊萨特拉斯洛丁：是的
};        
}
render（）{
if（this.state.isAtlasLoading）{
返回（图集加载）；
}
返回(
}/>
);
}
}

---

我希望我能帮助您。

您可以将回调传递给JSONHeader，完成后您可以在那里调用它