fix issue

spug_web/src/pages/host/Group.js

@@ -28,13 +28,16 @@ export default observer(function () {
   const [bakTreeData, setBakTreeData] = useState();
 
   useEffect(() => {
-    if (!loading) store.fetchGroups().then(() => {
-      if (loading === undefined) {
+    if (loading === false) store.fetchGroups()
+  }, [loading])
+
+  useEffect(() => {
+    if (store.treeData.length > 0 && expands === undefined) {
       const tmp = store.treeData.filter(x => x.children.length)
       setExpands(tmp.map(x => x.key))
     }
-    })
-  }, [loading])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store.treeData])
 
   const menus = (
     <Menu onClick={() => setVisible(false)}>

spug_web/src/pages/host/Table.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React, { useEffect } from 'react';
+import React  from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, Dropdown, Button, Menu, Avatar, Tooltip, Space, Tag, message } from 'antd';
 import { PlusOutlined, DownOutlined } from '@ant-design/icons';
@@ -13,10 +13,6 @@ import store from './store';
 import icons from './icons';
 
 function ComTable() {
-  useEffect(() => {
-    store.fetchRecords()
-  }, [])
-
   function handleDelete(text) {
     Modal.confirm({
       title: '删除确认',

spug_web/src/pages/host/index.js

@@ -3,9 +3,9 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Row, Col, Button } from 'antd';
+import { Row, Col } from 'antd';
 import { CodeOutlined } from '@ant-design/icons';
 import { AuthDiv, Breadcrumb, AuthButton } from 'components';
 import Group from './Group';
@@ -18,6 +18,10 @@ import Selector from './Selector';
 import store from './store';
 
 export default observer(function () {
+  useEffect(() => {
+    store.initial()
+  }, [])
+
   function openTerminal() {
     window.open('/ssh')
   }

spug_web/src/pages/host/store.js

@@ -40,10 +40,11 @@ class Store {
     this.isFetching = true;
     return http.get('/api/host/')
       .then(res => {
+        const tmp = {};
         this.records = res;
-        for (let item of this.records) {
-          this.idMap[item.id] = item
-        }
+        this.records.map(item => tmp[item.id] = item);
+        this.idMap = tmp;
+        this._makeCounter();
         this.refreshCounter()
       })
       .finally(() => this.isFetching = false)
@@ -53,14 +54,30 @@ class Store {
     this.grpFetching = true;
     return http.get('/api/host/group/')
       .then(res => {
-        this.treeData = res.treeData;
         this.groups = res.groups;
-        if (!this.group.key) this.group = this.treeData[0];
-        this.refreshCounter()
+        this.refreshCounter(res.treeData)
       })
       .finally(() => this.grpFetching = false)
   }
 
+  initial = () => {
+    this.isFetching = true;
+    this.grpFetching = true;
+    http.all([http.get('/api/host/'), http.get('/api/host/group/')])
+      .then(http.spread((res1, res2) => {
+        this.records = res1;
+        this.records.map(item => this.idMap[item.id] = item);
+        this.group = res2.treeData[0];
+        this.groups = res2.groups;
+        this._makeCounter();
+        this.refreshCounter(res2.treeData)
+      }))
+      .finally(() => {
+        this.isFetching = false;
+        this.grpFetching = false
+      })
+  }
+
   updateGroup = (group, host_ids) => {
     const form = {host_ids, s_group_id: group.key, t_group_id: this.group.key, is_copy: this.addByCopy};
     return http.patch('/api/host/', form)
@@ -85,10 +102,9 @@ class Store {
     this.selectorVisible = true;
   }
 
-  refreshCounter = () => {
-    this._makeCounter();
-    if (this.treeData.length && this.records.length) {
-      const treeData = lds.cloneDeep(this.treeData);
+  refreshCounter = (treeData) => {
+    treeData = treeData || lds.cloneDeep(this.treeData);
+    if (treeData.length && this.records.length) {
       for (let item of treeData) {
         this._refreshCounter(item)
       }