chore: 优化 scaffoldForm 实现统一用 store 来控制 (#6860)

packages/amis-core/src/renderers/Options.tsx

@@ -803,14 +803,16 @@ export function registerOptionsControl(config: OptionsConfig) {
         return;
       }
 
-      return formItem.loadOptions(
-        source,
-        data,
-        undefined,
-        false,
-        isInit ? setPrinstineValue : onChange,
-        setError
-      );
+      return isAlive(formItem)
+        ? formItem.loadOptions(
+            source,
+            data,
+            undefined,
+            false,
+            isInit ? setPrinstineValue : onChange,
+            setError
+          )
+        : undefined;
     }
 
     @autobind

packages/amis-editor-core/src/component/ScaffoldModal.tsx

@@ -4,7 +4,6 @@ import {EditorStoreType} from '../store/editor';
 import {render, Modal, getTheme, Icon, Spinner, Button} from 'amis';
 import {observer} from 'mobx-react';
 import {autobind, isObject} from '../util';
-import {createObject} from 'amis-core';
 
 export interface SubEditorProps {
   store: EditorStoreType;
@@ -12,23 +11,8 @@ export interface SubEditorProps {
   theme?: string;
 }
 
-interface ScaffoldState {
-  step: number;
-}
-
 @observer
-export class ScaffoldModal extends React.Component<
-  SubEditorProps,
-  ScaffoldState
-> {
-  constructor(props: SubEditorProps) {
-    super(props);
-
-    this.state = {
-      step: 0
-    };
-  }
-
+export class ScaffoldModal extends React.Component<SubEditorProps> {
   @autobind
   handleConfirm([values]: any) {
     const store = this.props.store;
@@ -47,7 +31,7 @@ export class ScaffoldModal extends React.Component<
 
     store.scaffoldForm?.callback(values);
     store.closeScaffoldForm();
-    this.setState({step: 0});
+    store.scaffoldForm?.stepsBody && store.setScaffoldStep(0);
   }
 
   buildSchema() {
@@ -91,9 +75,6 @@ export class ScaffoldModal extends React.Component<
       api: scaffoldFormContext.api,
       ...layout,
       wrapperComponent: 'div',
-      data: {
-        __step: 0
-      },
       [scaffoldFormContext.controls ? 'controls' : 'body']: body
     };
     // const {store} = this.props;
@@ -151,27 +132,25 @@ export class ScaffoldModal extends React.Component<
   @autobind
   goToNextStep() {
     // 不能更新props的data，控制amis不重新渲染，否则数据会重新初始化
+    const store = this.props.store;
     const form = this.amisScope?.getComponents()[0].props.store;
-    const step = this.state.step + 1;
+    const step = store.scaffoldFormStep + 1;
     form.setValueByName('__step', step);
 
     // 控制按钮
-    this.setState({
-      step
-    });
+    store.setScaffoldStep(step);
   }
 
   @autobind
   goToPrevStep() {
     // 不能更新props的data，控制amis不重新渲染，否则数据会重新初始化
+    const store = this.props.store;
     const form = this.amisScope?.getComponents()[0].props.store;
-    const step = this.state.step - 1;
+    const step = store.scaffoldFormStep - 1;
     form.setValueByName('__step', step);
 
     // 控制按钮
-    this.setState({
-      step
-    });
+    store.setScaffoldStep(step);
   }
 
   @autobind
@@ -206,7 +185,7 @@ export class ScaffoldModal extends React.Component<
   @autobind
   handleCancelClick() {
     this.props.store.closeScaffoldForm();
-    this.setState({step: 0});
+    this.props.store.setScaffoldStep(0);
   }
 
   render() {
@@ -216,8 +195,9 @@ export class ScaffoldModal extends React.Component<
 
     const isStepBody = !!scaffoldFormContext?.stepsBody;
     const isLastStep =
-      isStepBody && this.state.step === scaffoldFormContext!.body.length - 1;
-    const isFirstStep = isStepBody && this.state.step === 0;
+      isStepBody &&
+      store.scaffoldFormStep === scaffoldFormContext!.body.length - 1;
+    const isFirstStep = isStepBody && store.scaffoldFormStep === 0;
 
     return (
       <Modal
@@ -245,10 +225,7 @@ export class ScaffoldModal extends React.Component<
             render(
               this.buildSchema(),
               {
-                data: createObject(store.ctx, {
-                  ...(scaffoldFormContext?.value || {}),
-                  __step: 0
-                }),
+                data: store.scaffoldData,
                 onValidate: scaffoldFormContext.validate,
                 scopeRef: this.scopeRef
               },

packages/amis-editor-core/src/store/editor.ts

@@ -3,7 +3,8 @@ import {
   getVariable,
   mapObject,
   mapTree,
-  extendObject
+  extendObject,
+  createObject
 } from 'amis-core';
 import {cast, getEnv, Instance, types} from 'mobx-state-tree';
 import {
@@ -191,6 +192,7 @@ export const MainStore = types
     jsonSchemaUri: '',
 
     scaffoldForm: types.maybe(types.frozen<ScaffoldFormContext>()),
+    scaffoldFormStep: 0,
     scaffoldFormBuzy: false,
     scaffoldError: '',
 
@@ -997,6 +999,13 @@ export const MainStore = types
           1,
           true
         );
+      },
+
+      get scaffoldData() {
+        return createObject(self.ctx, {
+          ...(self.scaffoldForm?.value || {}),
+          __step: self.scaffoldFormStep
+        });
       }
     };
   })
@@ -1671,6 +1680,10 @@ export const MainStore = types
         self.scaffoldFormBuzy = !!value;
       },
 
+      setScaffoldStep(value: number) {
+        self.scaffoldFormStep = value;
+      },
+
       setScaffoldError(msg: string = '') {
         self.scaffoldError = msg;
       },

packages/amis/src/renderers/CRUD.tsx

@@ -50,6 +50,7 @@ import type {CardsRendererEvent} from './Cards';
 import {isPureVariable, resolveVariableAndFilter, parseQuery} from 'amis-core';
 
 import type {PaginationProps} from './Pagination';
+import {isAlive} from 'mobx-state-tree';
 
 export type CRUDBultinToolbarType =
   | 'columns-toggler'
@@ -1186,6 +1187,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             columns: store.columns ?? columns
           })
           .then(async value => {
+            if (!isAlive(store)) {
+              return value;
+            }
+
             const {page, lastPage, data, msg, error} = store;
 
             if (isInit) {