TODO: 解决多次渲染问题

src/App.js

@@ -6,14 +6,10 @@ import { Button, Layout, Menu, Tabs } from 'antd';
 import 'antd/dist/antd.css';
 import React, {useRef} from 'react';
 
-
 import './App.less';
-import ChartsCount from './ChartsCount';
+import ContentTabs from './ContentTabs'
-import TableData from './TableData';
 import TabsRoute from './Router';
-import { Link, Route, Router, HashRouter, Switch, useHistory } from 'react-router-dom';
  
-const { TabPane } = Tabs;
 const { Header, Content, Footer, Sider } = Layout;
 
 class App extends React.Component {
@@ -22,14 +18,11 @@ class App extends React.Component {
     super(props)
     this.state = {
       platform: "openrec",
-      collapsed: false,
+      tab: "tabledata",
-      tkey: "content_table",
+      collapsed: false
-      location: null,
     }
   }
 
- 
-
   toggleCollapsed = () => {
     this.setState({
       collapsed: !this.state.collapsed,
@@ -37,16 +30,16 @@ class App extends React.Component {
   };
 
   changePlatform = (p) => {
-    // this.setState({ platform: p });
+    this.setState({platform: p}, () => {
-    // if (this.chartscount && this.chartscount.state.platform !== p) {
+      this.refs.ctabs.changePlatform(this.state.platform);
-    //   this.chartscount.changePlatform(p)
+    })
-    // }
+
-    // this.tabledata.changePlatform(p);
   }
 
   render() {
+    const {tab, platform } = this.state;
+
     return (
-      <HashRouter>
 
       <Layout>
         <Sider
@@ -79,54 +72,7 @@ class App extends React.Component {
           </Header>
     
           <Content ref="content" style={{ margin: '0 8px' }}>
-          <Switch>
+            <ContentTabs ref="ctabs" tab={tab} platform={platform}></ContentTabs>
-            <Tabs
-              onChange={(e) => {
-                const history = useHistory();
-
-                const { platform } = this.state;
-                this.setState({ key: e })
-                
-                switch (e) {
-                  case "content_table":
-                    history.push("#/data")
-                    // this.props.history.push("#/data")
-                    if (this.refs.ctable) {
-                      this.refs.ctable.changePlatform(platform);
-                    }
-                    break;
-                  case "tag_count":
-                    history.push("#/count")
-                    // this.props.history.push("#/count")
-                    if (this.refs.tcharts) {
-                      this.refs.tcharts.changePlatform(platform);
-                    }
-                    break
-                  default:
-                    break;
-                }
-
-              }} >
-
-            
-
-
-            
-
-              <TabPane tab="数据表格" key="content_table">
-                  <Route path="/data"  render={()=>{
-                    return <TableData platform={this.state.platform}  ></TableData>
-                  }} ></Route>
-              </TabPane>
-
-              <TabPane tab="tag统计" key="tag_count">
-                <Route path="/count"  render={()=>{
-                  return <ChartsCount platform={this.state.platform} ></ChartsCount>
-                }} ></Route>
-              </TabPane>
-              
-            </Tabs>
-            </Switch>
           </Content>
 
           <Footer style={{ textAlign: 'center' }}>
@@ -134,11 +80,9 @@ class App extends React.Component {
             </Footer>
         </Layout>
       </Layout>
-      </HashRouter>         
+  
     );
   }
 }
 
-// ReactDOM.render(<App />, mountNode);
-
 export default App;

src/ChartsCount.js

@@ -83,7 +83,7 @@ function getOption(state = {}) {
 
 class ChartsCount extends React.Component {
     
-    constructor(props) {
+    constructor(props) { // platform 
         super(props)
         this.state = {
             option: {},
@@ -94,20 +94,23 @@ class ChartsCount extends React.Component {
         }
       }
 
-    changePlatform = (p) => {
+    changePlatform = (platform) => {
-        this.setState({ platform: p }, () => {
+        this.updateData({ platform: platform, countkey: this.state.countkey })
-            this.updateData();
-        });
     };
 
-    updateData = () => {
+    updateData = (params = {}) => {
-        const { countkey, platform } = this.state;
+
-        fetch(`${apihost}/tag/count?platform=${platform}&countkey=${countkey}`, {
+        const {platform, countkey, title} = params
+
+        fetch(`${apihost}/tag/count?platform=${platform?platform:this.state.platform}&countkey=${countkey?countkey:this.state.countkey}`, {
             "mode": "cors"
         }).then(
             response => {
                 response.json().then(value => {
                     this.setState({
+                        title: title?title:this.state.title,
+                        platform: platform?platform:this.state.platform, 
+                        countkey: countkey?countkey:this.state.countkey,
                         data: parseData(value)
                     }, () => {
                         var ins = this.echarts_react.getEchartsInstance();
@@ -119,12 +122,8 @@ class ChartsCount extends React.Component {
         )
     };
 
-    componentDidMount() {
-        this.updateData();
-    }
-
     countMethod(countkey, title) {
-        this.setState({ countkey: countkey, title: title }, () => { this.updateData() });
+        this.updateData({countkey: countkey, title: title});
     }
 
     render() {

src/ContentTabs.js

@@ -0,0 +1,75 @@
+
+import React  from 'react';
+import { Button, Layout, Menu, Tabs } from 'antd';
+import ChartsCount from './ChartsCount';
+import TableData from './TableData';
+
+const { TabPane } = Tabs;
+
+class ContentTabs extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      platform: this.props.platform,
+      tab: this.props.tab,
+      count: 1,
+    }
+  }
+
+  count = 1
+
+    componentDidMount() {
+    
+    }
+
+    changeTab = (tab) => {
+      this.setState({tab: tab}, ()=>{ this.updateDate() })
+    }
+
+    updateDate() {
+
+      switch(this.state.tab) {
+        case "tabledata":
+          if (this.refs.tabledata) {
+          this.refs.tabledata.changePlatform(this.state.platform);
+        }
+        break;
+
+        case "chartscount":
+          if (this.refs.chartscount) {
+            this.refs.chartscount.changePlatform(this.state.platform);
+          }
+        break;
+
+          default:
+      }
+    }
+
+    changePlatform = (platform) => {
+      this.setState({platform: platform}, ()=>{ this.updateDate()})
+    }
+
+    render()  {
+      this.count ++
+      return (
+
+    <Tabs 
+    onChange={  
+      this.changeTab
+    } >
+
+    <TabPane tab="数据表格" key="tabledata">
+      <TableData ref="tabledata" platform={this.state.platform}  ></TableData>
+    </TabPane>
+
+    <TabPane tab="tag统计" key="chartscount">
+       <ChartsCount ref="chartscount" platform={this.state.platform} ></ChartsCount>
+    </TabPane>
+  </Tabs>
+        )
+    }
+}
+
+
+export default ContentTabs;

src/Router.js

@@ -4,7 +4,7 @@ import { HashRouter, Route, Switch, BrowserRouter, Redirect } from 'react-router
 import TableData from "./TableData";
 import ChartsCount from "./ChartsCount";
 import { Link } from 'react-router-dom';
-import { Button, Layout, Menu, Tabs } from 'antd';
+import { Button, Layout, Menu, Tabs, Result } from 'antd';
 
 const { TabPane } = Tabs;
 
@@ -14,15 +14,20 @@ const MainRouter = () => {
     return (
         <BrowserRouter>
             <Switch>
-                {/* <Redirect from="/" to="#/data" ></Redirect> */}
                 <Route exact path="/" component={
                     App 
-                } >
+                } />
-                </Route>
+              
-                <Route exact path="/login" component={
+
-                    ChartsCount
+                <Route exact path="/*" render={ () => {
-                }>
+                    return <Result
-                </Route>
+                    status="404"
+                    title="404"
+                    subTitle="Sorry, the page you visited does not exist."
+                    extra={<Button type="primary" href="/">Back Home</Button>}
+                  />
+                }} />
+               
             </Switch>
         </BrowserRouter>
          )

src/index.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './Router';
 import MainRouter from './Router';
 import * as serviceWorker from './serviceWorker';
 import { Route } from 'react-router-dom';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <MainRouter/>,
-    <MainRouter />
+  // <React.StrictMode>
-  </React.StrictMode>,
+  //   <MainRouter />
+  // </React.StrictMode>,
   document.getElementById('root')
 );