将异步加载端通信到 React 接口

Question

有一个名为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);
}
});
})
}
})
}
}
}

我想更改 React 的顶级组件：App，从 isLoad： true，到 isLoad： false，在所有 json 都加载完毕后。我们怎样才能实现这种行为？目前，每次重新加载所有 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>
);
}
}

谢谢你的帮助。

Answer 1

使用超时来执行此操作不是一个好主意，因为您不知道完成需要花费多少时间。因此，您可以向 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>
);
}
}

我希望我能帮助你。