fix(form): onInit use ProFormInstance

close #7226
ant-design · Jun 17, 2023 · ad537a5 · ad537a5
1 parent b412ab9
commit ad537a5
Show file tree

Hide file tree

Showing 19 changed files with 188 additions and 76 deletions.
diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx
@@ -42,10 +42,14 @@ const FieldCascader: ProFieldFC<GroupProps> = (
   const cascaderRef = useRef();
   const [open, setOpen] = useState(false);
 
-  useImperativeHandle(ref, () => ({
-    ...(cascaderRef.current || {}),
-    fetchData: (keyWord: string) => fetchData(keyWord),
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(cascaderRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
 
   const optionsValueEnum = useMemo(() => {
     if (mode !== 'read') return;

diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -51,10 +51,14 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
     };
   });
   const checkBoxRef = useRef();
-  useImperativeHandle(ref, () => ({
-    ...(checkBoxRef.current || {}),
-    fetchData: (keyWord: string) => fetchData(keyWord),
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(checkBoxRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
 
   if (loading) {
     return <Spin size="small" />;

diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx
@@ -31,10 +31,14 @@ const FieldRadio: ProFieldFC<GroupProps> = (
   const [loading, options, fetchData] = useFieldFetchData(rest);
   const radioRef = useRef();
 
-  useImperativeHandle(ref, () => ({
-    ...(radioRef.current || {}),
-    fetchData: (keyWord: string) => fetchData(keyWord),
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(radioRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
 
   // css
   const { wrapSSR, hashId } = useStyle('FieldRadioRadio', (token) => {

diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx
@@ -26,10 +26,14 @@ const FieldSegmented: ProFieldFC<
 
   const [loading, options, fetchData] = useFieldFetchData(rest);
 
-  useImperativeHandle(ref, () => ({
-    ...(inputRef.current || {}),
-    fetchData: (keyWord: string) => fetchData(keyWord),
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(inputRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
 
   if (loading) {
     return <Spin size="small" />;

diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -520,10 +520,14 @@ const FieldSelect: ProFieldFC<
   const { componentSize } = ConfigProvider?.useConfig?.() || {
     componentSize: 'middle',
   };
-  useImperativeHandle(ref, () => ({
-    ...(inputRef.current || {}),
-    fetchData: (keyWord: string) => fetchData(keyWord),
-  }));
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...(inputRef.current || {}),
+      fetchData: (keyWord: string) => fetchData(keyWord),
+    }),
+    [fetchData],
+  );
 
   const optionsValueEnum = useMemo(() => {
     if (mode !== 'read') return;

diff --git a/packages/field/src/components/Text/index.tsx b/packages/field/src/components/Text/index.tsx
@@ -23,7 +23,9 @@ const FieldText: ProFieldFC<{
 
   const intl = useIntl();
   const inputRef = useRef<HTMLInputElement>();
-  useImperativeHandle(ref, () => inputRef.current);
+
+  useImperativeHandle(ref, () => inputRef.current, []);
+
   useEffect(() => {
     if (autoFocus) {
       inputRef.current?.focus();

diff --git a/packages/form/src/BaseForm/BaseForm.tsx b/packages/form/src/BaseForm/BaseForm.tsx
@@ -341,7 +341,6 @@ function BaseFormComponents<T = Record<string, any>>(
         const transformedKey = transformKey(values, omitNil);
         return transformedKey ? transformedKey : {};
       },
-      formRef,
     }),
     [omitNil, transformKey],
   );
@@ -447,18 +446,26 @@ function BaseFormComponents<T = Record<string, any>>(
         ...formatValues,
       };
     },
-    [],
+    [formatValues, formRef.current],
   );
   useEffect(() => {
     const finalValues = transformKey(
       formRef.current?.getFieldsValue?.(true),
       omitNil,
     );
-    onInit?.(finalValues, formRef.current);
+    onInit?.(finalValues, {
+      ...formRef.current,
+      ...formatValues,
+    });
   }, []);
 
   return (
-    <ProFormContext.Provider value={formatValues}>
+    <ProFormContext.Provider
+      value={{
+        ...formatValues,
+        formRef,
+      }}
+    >
       <ConfigProvider componentSize={rest.size || componentSize}>
         <GridContext.Provider value={{ grid, colProps }}>
           {rest.component !== false && (

diff --git a/packages/form/src/layouts/DrawerForm/index.tsx b/packages/form/src/layouts/DrawerForm/index.tsx
@@ -129,9 +129,13 @@ function DrawerForm<T = Record<string, any>>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propVisible, open]);
 
-  useImperativeHandle(rest.formRef, () => {
-    return formRef.current;
-  });
+  useImperativeHandle(
+    rest.formRef,
+    () => {
+      return formRef.current;
+    },
+    [formRef.current],
+  );
 
   const triggerDom = useMemo(() => {
     if (!trigger) {

diff --git a/packages/form/src/layouts/LightFilter/index.tsx b/packages/form/src/layouts/LightFilter/index.tsx
@@ -269,7 +269,7 @@ function LightFilter<T = Record<string, any>>(props: LightFilterProps<T>) {
   });
   const formRef = useRef<ProFormInstance>();
 
-  useImperativeHandle(userFormRef, () => formRef.current);
+  useImperativeHandle(userFormRef, () => formRef.current, [formRef.current]);
 
   return (
     <BaseForm

diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx
@@ -121,9 +121,13 @@ function ModalForm<T = Record<string, any>>({
     }
   }, [modalProps?.destroyOnClose, rest.form, rest.formRef]);
 
-  useImperativeHandle(rest.formRef, () => {
-    return formRef.current;
-  });
+  useImperativeHandle(
+    rest.formRef,
+    () => {
+      return formRef.current;
+    },
+    [formRef.current],
+  );
 
   useEffect(() => {
     if (open && (propsOpen || propVisible)) {

diff --git a/packages/form/src/layouts/StepsForm/StepForm.tsx b/packages/form/src/layouts/StepsForm/StepForm.tsx
@@ -27,8 +27,11 @@ function StepForm<T = Record<string, any>>(props: StepFormProps<T>) {
 
   //@ts-expect-error
   noteOnce(!restProps.submitter, 'StepForm 不包含提交按钮，请在 StepsForm 上');
+
   /** 重置 formRef */
-  useImperativeHandle(propFormRef, () => formRef.current);
+  useImperativeHandle(propFormRef, () => formRef.current, [
+    propFormRef?.current,
+  ]);
 
   /** Dom 不存在的时候解除挂载 */
   useEffect(() => {

diff --git a/packages/form/src/layouts/StepsForm/index.tsx b/packages/form/src/layouts/StepsForm/index.tsx
@@ -225,14 +225,16 @@ function StepsForm<T = Record<string, any>>(
     formDataRef.current.delete(name);
   }, []);
 
-  useImperativeHandle(propsFormMapRef, () => formArrayRef.current);
+  useImperativeHandle(propsFormMapRef, () => formArrayRef.current, [
+    formArrayRef.current,
+  ]);
 
   useImperativeHandle(
     formRef,
     () => {
       return formArrayRef.current[step || 0]?.current;
     },
-    [step],
+    [step, formArrayRef.current],
   );
 
   /**

diff --git a/packages/list/src/index.tsx b/packages/list/src/index.tsx
@@ -123,7 +123,9 @@ function NoProVideProList<
 
   const actionRef = useRef<ActionType>();
 
-  useImperativeHandle(rest.actionRef, () => actionRef.current);
+  useImperativeHandle(rest.actionRef, () => actionRef.current, [
+    actionRef.current,
+  ]);
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
 

diff --git a/packages/table/src/components/EditableTable/index.tsx b/packages/table/src/components/EditableTable/index.tsx
@@ -171,7 +171,9 @@ function EditableTable<
   const formRef = useRef<ProFormInstance>();
 
   // 设置 ref
-  useImperativeHandle(rest.actionRef, () => actionRef.current);
+  useImperativeHandle(rest.actionRef, () => actionRef.current, [
+    actionRef.current,
+  ]);
 
   const [value, setValue] = useMergedState<readonly DataType[]>(
     () => props.value || defaultValue || [],

diff --git a/packages/table/src/components/Form/FormRender.tsx b/packages/table/src/components/Form/FormRender.tsx
@@ -1,8 +1,12 @@
-import type { BaseQueryFilterProps, ProFormProps } from '@ant-design/pro-form';
+import type {
+  BaseQueryFilterProps,
+  ProFormInstance,
+  ProFormProps,
+} from '@ant-design/pro-form';
 import { BetaSchemaForm } from '@ant-design/pro-form';
 import { ProProvider } from '@ant-design/pro-provider';
 import type { ProSchemaComponentTypes } from '@ant-design/pro-utils';
-import type { FormInstance, FormItemProps } from 'antd';
+import type { FormItemProps } from 'antd';
 import { ConfigProvider, Table } from 'antd';
 import classNames from 'classnames';
 import omit from 'omit.js';
@@ -99,7 +103,7 @@ export type TableFormItem<T, U = any> = {
   dateFormatter?: ProTableProps<T, U, any>['dateFormatter'];
   search?: false | SearchConfig;
   columns: ProColumns<U, any>[];
-  formRef: React.MutableRefObject<FormInstance | undefined>;
+  formRef: React.MutableRefObject<ProFormInstance | undefined>;
   submitButtonLoading?: boolean;
   manualRequest?: boolean;
   bordered?: boolean;

diff --git a/packages/utils/src/useEditableArray/index.tsx b/packages/utils/src/useEditableArray/index.tsx
@@ -367,9 +367,15 @@ export function SaveEditableAction<T>(
       throw error;
     }
   });
-  useImperativeHandle(ref, () => ({
-    save,
-  }));
+
+  // 保存数据
+  useImperativeHandle(
+    ref,
+    () => ({
+      save,
+    }),
+    [save],
+  );
 
   return (
     <a