我必须在插件中更新一些信息。我要做的是:
app.js:
import React, { Component } from 'react';
import CesiumGlobe from "./cesium/CesiumGlobe";
class App extends Component {
constructor(props){
super(props);
this.state = {
pin : [],
};
}
componentDidMount() {
let fetchData = () => {
let url= "localhost:3001/pin"
fetch(url)
.then(resp=>resp.json())
.then(data =>{
this.setState((state)=>{
return { pin:data }
})
});
}
fetchData()
this.update = setInterval(fetchData, 2000)
}
render() {
const containerStyle = {
width: '100%',
height: '100%',
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'fixed',
};
let icons = [];
this.state.pin.forEach(function(element) {
icons.push(element);
});
return (
<div style={containerStyle}>
<CesiumGlobe icons={icons} />
<div style={{position : "fixed", top : 0}}>
<div style={{color : "white", fontSize: 40, }}>
Text Over the Globe
</div>
<button style={{fontSize : 40}} onClick={this.handleFlyToClicked}>
Jump Camera Location
</button>
</div>
</div>
);
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import "cesium/Source/Widgets/widgets.css";
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
buildModuleUrl.setBaseUrl('./cesium/');
function tick() {
ReactDOM.render(
<App />,
document.getElementById('root')
);
}
setInterval(tick, 1000);
我的意图是,这应该每秒加载一次“ pin.json”的内容,并将其传递给每秒更新一次的状态。
我第一次启动应用程序时,它运行良好,但是如果我对json进行更改,则更改将被完全忽略...
我找不到我做错了什么,似乎我正在丢掉房间里的大象,但是我所有的研究都没有给我任何东西。