combo 只有在 form 初始化完成后才开始渲染

scss/_utilities.scss

@@ -1195,6 +1195,14 @@
   height: 360px;
 }
 
+.w-xxxl {
+  width: 420px;
+}
+
+.h-xxxl {
+  height: 420px;
+}
+
 .w-full {
   width: 100%;
 }

src/renderers/Form/Combo.tsx

@@ -1131,13 +1131,13 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   render() {
-    const {multiple, className, classPrefix: ns, classnames: cx, disabled} = this.props;
+    const {formInited, multiple, className, classPrefix: ns, classnames: cx, disabled} = this.props;
 
-    return (
+    return formInited ? (
       <div className={cx(`ComboControl`, className)}>
         {multiple ? this.renderMultipe() : this.renderSingle()}
       </div>
-    );
+    ) : null;
   }
 }
 

src/renderers/Form/Item.tsx

@@ -677,6 +677,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
 // 除非配置  strictMode
 export const detectProps = [
   'formPristine', // 这个千万不能干掉。
+  'formInited',
   'addable',
   'addButtonClassName',
   'addButtonText',

src/renderers/Form/Service.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Renderer, RendererProps} from '../../factory';
-import BasicService from '../Service';
+import BasicService, {ServiceProps} from '../Service';
 import {Schema} from '../../types';
 import Scoped, {ScopedContext, IScopedContext} from '../../Scoped';
 import {observer} from 'mobx-react';
@@ -22,9 +22,30 @@ export class ServiceRenderer extends BasicService {
     scoped.registerComponent(this);
   }
 
+  componentDidMount() {
+    const {formInited, addHook} = this.props;
+
+    if (formInited) {
+      super.componentDidMount();
+    } else {
+      addHook && addHook(this.initFetch, 'init');
+    }
+  }
+
+  componentDidUpdate(prevProps: ServiceProps) {
+    const {formInited} = this.props;
+    if (formInited) {
+      super.componentDidUpdate(prevProps);
+    }
+  }
+
   componentWillUnmount() {
     const scoped = this.context as IScopedContext;
     scoped.unRegisterComponent(this);
+
+    const removeHook = this.props.removeHook;
+    removeHook && removeHook(this.initFetch, 'init');
+    super.componentWillUnmount();
   }
 
   renderBody(): JSX.Element {

src/renderers/Form/index.tsx

@@ -279,7 +279,7 @@ export default class Form extends React.Component<FormProps, object> {
         .then(this.initInterval)
         .then(this.onInit);
     } else {
-      this.onInit();
+      setTimeout(this.onInit.bind(this), 4);
     }
   }
 

src/renderers/Service.tsx

@@ -9,6 +9,7 @@ import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
 import {observer} from 'mobx-react';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {Spinner} from '../components';
+import {autobind} from '../utils/helper';
 
 export interface ServiceProps extends RendererProps {
   api?: Api;
@@ -48,33 +49,8 @@ export default class Service extends React.Component<ServiceProps> {
   }
 
   componentDidMount() {
-    const {
-      schemaApi,
-      initFetchSchema,
-      api,
-      initFetch,
-      initFetchOn,
-      store,
-      messages: {fetchSuccess, fetchFailed}
-    } = this.props;
-
     this.mounted = true;
-
-    if (isEffectiveApi(schemaApi, store.data, initFetchSchema)) {
-      store.fetchSchema(schemaApi, store.data, {
-        successMessage: fetchSuccess,
-        errorMessage: fetchFailed
-      });
-    }
-
-    if (isEffectiveApi(api, store.data, initFetch, initFetchOn)) {
-      store
-        .fetchInitData(api, store.data, {
-          successMessage: fetchSuccess,
-          errorMessage: fetchFailed
-        })
-        .then(this.initInterval);
-    }
+    this.initFetch();
   }
 
   componentDidUpdate(prevProps: ServiceProps) {
@@ -112,6 +88,35 @@ export default class Service extends React.Component<ServiceProps> {
     clearTimeout(this.timer);
   }
 
+  @autobind
+  initFetch() {
+    const {
+      schemaApi,
+      initFetchSchema,
+      api,
+      initFetch,
+      initFetchOn,
+      store,
+      messages: {fetchSuccess, fetchFailed}
+    } = this.props;
+
+    if (isEffectiveApi(schemaApi, store.data, initFetchSchema)) {
+      store.fetchSchema(schemaApi, store.data, {
+        successMessage: fetchSuccess,
+        errorMessage: fetchFailed
+      });
+    }
+
+    if (isEffectiveApi(api, store.data, initFetch, initFetchOn)) {
+      store
+        .fetchInitData(api, store.data, {
+          successMessage: fetchSuccess,
+          errorMessage: fetchFailed
+        })
+        .then(this.initInterval);
+    }
+  }
+
   initInterval(value: any) {
     const {interval, silentPolling, stopAutoRefreshWhen, data} = this.props;