apply api

src/App.js

@@ -1,36 +1,68 @@
-import { useMemo, useState } from 'react';
 import './App.css';
 import Pane from './Components/pane';
 import DeviceFrame from './Components/deviceFrame';
 import waterMarkPng from './images/water-mark.png'
+import React from 'react';
 
-var mockProjects = [{"Name":"AN_战斗模拟","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/AN_战斗模拟/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"AN_美女被困","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_美女被困/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"获得钥匙商店|获得鸡腿商店|胜利失败"}},{"Name":"AN_解开锁链","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_解开锁链/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"第一把锁商店|第二把锁商店|全部锁胜利失败"}},{"Name":"GOG_DIY帆船","OldSlectType":"1|2|2","HtmlUrl":"PlayableData/GOG_DIY帆船/index.html","TextObjStr":{"TopText":"黑胡子|女海盗|铁面男","MiddText":"商店|结算|无","CentText":"只选船舵|全部选择|无"}},{"Name":"GOG_DIY飞艇","OldSlectType":"2|2|2","HtmlUrl":"PlayableData/GOG_DIY飞艇/index.html","TextObjStr":{"TopText":"黑胡子|美人鱼|无立绘","MiddText":"商店|结算|无","CentText":"只选飞艇|全部选择|无"}},{"Name":"GOG_抢滩登陆","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_抢滩登陆/index.html","TextObjStr":{"TopText":"有立绘|无立绘|无","MiddText":"胜利失败|跳转商店|无","CentText":"第二关|第一关|无"}},{"Name":"GOG_潜入营救","OldSlectType":"2|1|2","HtmlUrl":"PlayableData/GOG_潜入营救/index.html","TextObjStr":{"TopText":"立辉|无立辉|无","MiddText":"结算|商店|无","CentText":"胜利失败|杀一层|杀二层"}},{"Name":"GOG_船舱杀敌","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_船舱杀敌/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"KOA_救治组装","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/KOA_救治组装/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"SS_页游换装备","OldSlectType":"2|1|1","HtmlUrl":"PlayableData/SS_页游换装备/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}}]
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      mode: 'normal',
+      projects: [],
+      selectedProject: {},
+      device: 'android-h',
+      htmlUrl: ''
+    }
+  }
+  componentDidMount() {
+    this.fetchData();
+  }
 
-function App() {
-  var [mode, setMode] = useState("normal")
-  var [projects, setProjects] = useState([])
-  var [selectedProject, setSelectedProject] = useState({})
-  var [device, setDevice] = useState('android-h')
+  setSelectedProject(selected) {
+    this.setState({
+      selectedProject: selected
+    });
+  }
 
-  Promise.resolve().then(() => {
-    setProjects(mockProjects)
-  })
+  setDevice(selected) {
+    this.setState({
+      device: selected
+    });
+  }
 
-  var htmlUrl = useMemo(() => selectedProject ? selectedProject.HtmlUrl : '', [selectedProject])
+  setMode(mode) {
+    this.setState({
+      mode: mode
+    });
+  }
 
-  // fetch('http://123.56.161.61:1157/home/GetServerJsonData').then((v) => console.log(v))
+  fetchData() {
+    fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    }).then((response) =>
+      response.json()
+      .then(projects => this.setState({
+        projects
+      })));
+  }
+
+  render() {
+    var { mode, device, projects, selectedProject } = this.state;
 
     return (
       <div className="App">
         <Pane
           mode={mode}
-        onModeChange={(_mode) => setMode(_mode) }
+          onModeChange={(_mode) => this.setMode(_mode) }
           projects={projects}
           onProjectSelect={(project) => {
-          console.log('xxx', project)
-          setSelectedProject(project)
+            console.log(project)
+            this.setSelectedProject(project)
           }}
-        onDeviceChange={(_device) => setDevice(_device)}/>
+          onDeviceChange={(_device) => this.setDevice(_device)}/>
         <div style={{
           display: 'flex',
           flex: 1,
@@ -43,7 +75,7 @@ function App() {
         {
           mode === "normal"
           ? <DeviceFrame
-            htmlUrl={htmlUrl}
+              htmlUrl={selectedProject.HtmlUrl}
               device={device}/>
           : <div>setting content</div>
         }
@@ -51,5 +83,6 @@ function App() {
       </div>
     );
   }
+}
 
 export default App;