解决 Table 下的 form lazyChange 机制没有提交最新数据的问题

src/renderers/Form/Control.tsx

@@ -32,7 +32,7 @@ export interface ControlProps extends RendererProps {
   } & Schema;
   formStore: IFormStore;
   store: IIRendererStore;
-  addHook: (fn: () => any) => void;
+  addHook: (fn: () => any, type?: 'validate' | 'init' | 'flush') => void;
   removeHook: (fn: () => any) => void;
 }
 
@@ -147,7 +147,7 @@ export default class FormControl extends React.PureComponent<
 
     // 提交前先把之前的 lazyEmit 执行一下。
     this.hook3 = () => this.lazyEmitChange.flush();
-    addHook(this.hook3);
+    addHook(this.hook3, 'flush');
 
     const formItem = this.model as IFormItemStore;
     if (formItem && validate) {

src/renderers/Form/Table.tsx

@@ -72,6 +72,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
   entries: Map<any, number>;
   entityId: number = 1;
   subForms: any = {};
+  editting: any = {};
   constructor(props: TableProps) {
     super(props);
 
@@ -224,9 +225,17 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       data,
       env
     } = this.props;
+
+    // form 是 lazyChange 的，先让他们 flush, 即把未提交的数据提交。
+    const subForms: Array<any> = [];
+    Object.keys(this.subForms).forEach(
+      key => this.subForms[key] && subForms.push(this.subForms[key])
+    );
+    subForms.forEach(form => form.flush());
+
     let newValue = Array.isArray(value) ? value.concat() : [];
     let item = {
-      ...this.state.editting
+      ...this.editting
     };
 
     const origin = newValue[this.state.editIndex];
@@ -509,7 +518,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
 
     if (~this.state.editIndex) {
       this.setState({
-        editting: {
+        editting: this.editting = {
           ...rows
         }
       });
@@ -553,7 +562,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
 
   getEntryId(entry: any) {
     if (entry === this.state.editting) {
-      return 'editing';
+      return 'editting';
     } else if (!this.entries.has(entry)) {
       this.entries.set(entry, this.entityId++);
     }

src/renderers/Form/index.tsx

@@ -421,6 +421,7 @@ export default class Form extends React.Component<FormProps, object> {
   validate(forceValidate?: boolean): Promise<boolean> {
     const {store} = this.props;
 
+    this.flush();
     return store.validate(this.hooks['validate'] || [], forceValidate);
   }
 
@@ -432,6 +433,7 @@ export default class Form extends React.Component<FormProps, object> {
 
   submit(fn?: (values: object) => Promise<any>): Promise<any> {
     const {store, messages} = this.props;
+    this.flush();
 
     return store.submit(
       fn,
@@ -440,12 +442,19 @@ export default class Form extends React.Component<FormProps, object> {
     );
   }
 
+  // 如果开启了 lazyChange，需要一个 flush 方法把队列中值应用上。
+  flush() {
+    const hooks = this.hooks['flush'] || [];
+    hooks.forEach(fn => fn());
+    this.lazyHandleChange.flush();
+  }
+
   reset() {
     const {store, onReset} = this.props;
     store.reset(onReset);
   }
 
-  addHook(fn: () => any, type: string = 'validate') {
+  addHook(fn: () => any, type: 'validate' | 'init' | 'flush' = 'validate') {
     this.hooks[type] = this.hooks[type] || [];
     this.hooks[type].push(promisify(fn));
     return () => {

src/store/form.ts

@@ -497,7 +497,11 @@ export const FormStore = ServiceStore.named('FormStore')
       deleteValueByName,
       getPersistData,
       setPersistData,
-      clearPersistData
+      clearPersistData,
+      beforeDestroy() {
+        syncOptions.cancel();
+        setPersistData.cancel();
+      }
     };
   });