@ant-design/pro-components 3.1.2-0 → 3.1.3-0

package/es/card/components/Card/index.js

@@ -3,7 +3,7 @@ import { omit, useControlledState } from '@rc-component/util';
 import { ConfigProvider, Grid, Tabs } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext } from 'react';
-import { LabelIconTip } from "../../../utils";
+import { LabelIconTip, useRefFunction } from "../../../utils";
 import Actions from "../Actions";
 import Loading from "../Loading";
 import useStyle from "./style";
@@ -61,13 +61,27 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
     xxl: false
   };
   const [collapsed, setCollapsedInner] = useControlledState(defaultCollapsed, controlCollapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = useRefFunction(c => {
+    onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = useCallback(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [onCollapse]);
+  }, [onCollapseCallback]);
 
   // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
   const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];

package/es/descriptions/useFetchData.js

@@ -1,5 +1,6 @@
 import { useControlledState } from '@rc-component/util';
 import { useCallback, useEffect } from 'react';
+import { useRefFunction } from "../utils";
 const useFetchData = (getData, options) => {
   const {
     onRequestError,
@@ -18,13 +19,27 @@ const useFetchData = (getData, options) => {
     });
   }, [onDataSourceChange]);
   const [loading, setLoadingInner] = useControlledState(options?.loading, options?.loading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChange = useRefFunction(l => {
+    options?.onLoadingChange?.(l);
+  });
+
+  /**
+   * 包装 setLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setLoading = useCallback(updater => {
     setLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      options?.onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChange(next);
+      });
       return next;
     });
-  }, [options?.onLoadingChange]);
+  }, [onLoadingChange]);
   const updateDataAndLoading = data => {
     setEntity(data);
     setLoading(false);

package/es/field/components/Cascader/index.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param ref
  */
 const FieldCascader = ({
-  radioType,
   placeholder,
   formItemRender,
   mode,
@@ -79,7 +78,6 @@ const FieldCascader = ({
   if (mode === 'edit') {
     const fieldProps = rest.fieldProps || {};
     let dom = /*#__PURE__*/_jsx(Cascader, {
-      variant: !light ? variant : 'borderless',
       ref: cascaderRef,
       open: open,
       suffixIcon: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : undefined,

package/es/field/components/Checkbox/index.js

@@ -101,6 +101,7 @@ const FieldCheckbox = ({
   if (mode === 'edit') {
     const {
       fieldNames,
+      variant,
       ...restFieldProps
     } = rest.fieldProps || {};
     const dom = wrapSSR(
@@ -108,6 +109,7 @@ const FieldCheckbox = ({
     //@ts-ignore
     _jsx(Checkbox.Group, {
       ...restFieldProps,
+      variant: variant,
       className: clsx(rest.fieldProps?.className, hashId, `${layoutClassName}-${layout}`, {
         [`${layoutClassName}-error`]: status?.status === 'error',
         [`${layoutClassName}-warning`]: status?.status === 'warning'

package/es/field/components/Code/index.js

@@ -27,7 +27,6 @@ const FieldCode = ({
   render,
   language = 'text',
   formItemRender,
-  plain,
   fieldProps
 }, ref) => {
   const code = languageFormat(text, language);
@@ -65,17 +64,11 @@ const FieldCode = ({
   }
   if (mode === 'edit' || mode === 'update') {
     fieldProps.value = code;
-    let dom = /*#__PURE__*/_jsx(Input.TextArea, {
+    const dom = /*#__PURE__*/_jsx(Input.TextArea, {
       rows: 5,
       ...fieldProps,
       ref: ref
     });
-    if (plain) {
-      dom = /*#__PURE__*/_jsx(Input, {
-        ...fieldProps,
-        ref: ref
-      });
-    }
     if (formItemRender) {
       return formItemRender(code, {
         mode,

package/es/field/components/ColorPicker/index.d.ts

@@ -3,5 +3,5 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("src/provider").BaseProFieldFC & import("src/provider").ProRenderFieldPropsType & {
     text: string;
     mode?: "update" | "read" | "edit" | undefined;
-} & Partial<Omit<ColorPickerProps, "value" | "mode">> & React.RefAttributes<any>>;
+} & Partial<Omit<ColorPickerProps, "mode" | "value">> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/DatePicker/index.js

@@ -29,12 +29,11 @@ const FieldDatePicker = ({
   light,
   render,
   formItemRender,
-  plain,
   showTime,
   fieldProps,
   picker,
-  variant,
-  lightLabel
+  lightLabel,
+  variant
 }, ref) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
@@ -82,7 +81,6 @@ const FieldDatePicker = ({
             setOpen(isOpen);
             fieldProps?.onOpenChange?.(isOpen);
           },
-          variant: "borderless",
           open: open
         }) : undefined,
         allowClear: false,
@@ -96,7 +94,7 @@ const FieldDatePicker = ({
         showTime: showTime,
         format: format,
         placeholder: placeholder,
-        variant: plain === undefined ? variant : plain ? 'borderless' : 'outlined',
+        variant: variant,
         ref: ref,
         ...fieldProps,
         value: dayValue

package/es/field/components/FromNow/index.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string;
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/FromNow/index.js

@@ -15,7 +15,7 @@ dayjs.extend(relativeTime);
 const FieldFromNow = ({
   text,
   mode,
-  plain,
+  variant,
   render,
   formItemRender,
   format,
@@ -46,7 +46,7 @@ const FieldFromNow = ({
       ref: ref,
       placeholder: placeholder,
       showTime: true,
-      variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
+      variant: variant ?? fieldProps?.variant ?? 'outlined',
       ...fieldProps,
       value: momentValue
     });

package/es/field/components/Money/index.js

@@ -165,7 +165,6 @@ const FieldMoney = ({
   formItemRender,
   fieldProps,
   proFieldKey,
-  plain,
   valueEnum,
   placeholder,
   locale,

package/es/field/components/Progress/index.js

@@ -25,7 +25,6 @@ const FieldProgress = ({
   text,
   mode,
   render,
-  plain,
   formItemRender,
   fieldProps,
   placeholder
@@ -42,7 +41,7 @@ const FieldProgress = ({
         maxWidth: 320
       },
       percent: realValue,
-      steps: plain ? 10 : undefined,
+      steps: fieldProps?.steps,
       status: getProgressStatus(realValue),
       ...fieldProps
     });

package/es/field/components/RangePicker/index.js

@@ -19,10 +19,9 @@ const FieldRangePicker = ({
   render,
   picker,
   formItemRender,
-  plain,
   showTime,
   lightLabel,
-  variant,
+  variant: propsVariant,
   fieldProps
 }, ref) => {
   const intl = useIntl();
@@ -87,14 +86,8 @@ const FieldRangePicker = ({
           picker: picker,
           showTime: showTime,
           format: format,
-          variant: "borderless",
           ...fieldProps,
-          placeholder: fieldProps.placeholder ?? [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')]
-          // onClear={() => {
-          //   setOpen(false);
-          //   fieldProps?.onClear?.();
-          // }}
-          ,
+          placeholder: fieldProps.placeholder ?? [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')],
           value: dayValue,
           onOpenChange: isOpen => {
             if (dayValue) setOpen(isOpen);
@@ -102,8 +95,8 @@ const FieldRangePicker = ({
           },
           onChange: handleRangeChange
         }) : null,
+        variant: propsVariant,
         allowClear: false,
-        variant: variant,
         ref: lightLabel,
         downIcon: dayValue || open ? false : undefined
       });
@@ -113,7 +106,6 @@ const FieldRangePicker = ({
         format: format,
         showTime: showTime,
         placeholder: [intl.getMessage('tableForm.selectPlaceholder', '请选择'), intl.getMessage('tableForm.selectPlaceholder', '请选择')],
-        variant: plain === undefined ? variant : plain ? 'borderless' : 'outlined',
         ...fieldProps,
         value: dayValue
       });

package/es/field/components/Select/LightSelect/index.d.ts

@@ -15,6 +15,7 @@ export type LightSelectProps = {
     fetchDataOnSearch?: boolean;
     /** 变体类型 */
     variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+    labelVariant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
 } & ProFieldLightProps & SelectProps;
 export declare const LightSelect: React.ForwardRefRenderFunction<any, SelectProps<any> & LightSelectProps>;
 declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import("antd/es/select").DefaultOptionType> & {
@@ -31,5 +32,6 @@ declare const _default: React.ForwardRefExoticComponent<SelectProps<any, import(
     fetchDataOnSearch?: boolean | undefined;
     /** 变体类型 */
     variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
+    labelVariant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & SelectProps<any, import("antd/es/select").DefaultOptionType> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/LightSelect/index.js

@@ -26,6 +26,7 @@ export const LightSelect = (props, ref) => {
     value,
     mode,
     defaultValue,
+    labelVariant,
     size,
     showSearch,
     disabled,
@@ -72,6 +73,7 @@ export const LightSelect = (props, ref) => {
           width: '153px',
           height: '28px',
           visibility: 'hidden',
+          opacity: 0,
           '&-selector': {
             height: 28
           }
@@ -200,7 +202,7 @@ export const LightSelect = (props, ref) => {
       label: label,
       placeholder: placeholder,
       disabled: disabled,
-      variant: variant,
+      variant: labelVariant,
       allowClear: !!allowClear,
       value: filterValue || value?.label || value,
       onClear: () => {

package/es/field/components/Select/index.d.ts

@@ -47,5 +47,5 @@ declare const _default: React.ForwardRefExoticComponent<import("../../../provide
     id?: string | undefined;
     /** 默认搜素条件 */
     defaultKeyWords?: string | undefined;
-} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "className" | "style" | "fieldNames"> & React.RefAttributes<any>>;
+} & ProFieldLightProps & Pick<SelectProps<any, import("antd/es/select").DefaultOptionType>, "style" | "className" | "fieldNames"> & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/Select/index.js

@@ -306,7 +306,6 @@ const FieldSelect = (props, ref) => {
     const renderDom = () => {
       if (light) {
         return /*#__PURE__*/_jsx(LightSelect, {
-          variant: variant,
           id: id,
           loading: loading,
           ref: inputRef,
@@ -314,6 +313,7 @@ const FieldSelect = (props, ref) => {
           size: componentSize,
           options: options,
           label: label,
+          labelVariant: variant,
           placeholder: intl.getMessage('tableForm.selectPlaceholder', '请选择'),
           lightLabel: lightLabel,
           labelTrigger: labelTrigger,
@@ -327,7 +327,6 @@ const FieldSelect = (props, ref) => {
           minWidth: 100,
           ...rest.style
         },
-        variant: variant,
         id: id,
         loading: loading,
         ref: inputRef,

package/es/field/components/Switch/index.js

@@ -18,9 +18,10 @@ const FieldSwitch = ({
   label,
   formItemRender,
   fieldProps,
-  variant
+  variant: propsVariant
 }, ref) => {
   const intl = useIntl();
+  const variant = propsVariant ?? fieldProps?.variant;
   const dom = useMemo(() => {
     if (text === undefined || text === null || `${text}`.length < 1) return '-';
     return text ? fieldProps?.checkedChildren ?? intl.getMessage('switch.open', '打开') : fieldProps?.unCheckedChildren ?? intl.getMessage('switch.close', '关闭');

package/es/field/components/TimePicker/index.d.ts

@@ -3,10 +3,12 @@ import type { ProFieldLightProps } from '../../PureProField';
 declare const FieldTimeRangePicker: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string[] | number[];
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export { FieldTimeRangePicker };
 declare const _default: React.ForwardRefExoticComponent<import("../../../provider").BaseProFieldFC & import("../../../provider").ProRenderFieldPropsType & {
     text: string | number;
     format?: string | undefined;
+    variant?: "outlined" | "filled" | "borderless" | "underlined" | undefined;
 } & ProFieldLightProps & React.RefAttributes<any>>;
 export default _default;

package/es/field/components/TimePicker/index.js

@@ -18,9 +18,9 @@ const FieldTimePicker = ({
   format = 'HH:mm:ss',
   render,
   formItemRender,
-  plain,
   fieldProps,
-  lightLabel
+  lightLabel,
+  variant
 }, ref) => {
   const [open, setOpen] = useState(false);
   const intl = useIntl();
@@ -59,8 +59,9 @@ const FieldTimePicker = ({
         } : undefined,
         label: label,
         disabled: disabled,
+        variant: variant ?? fieldProps?.variant,
         value: dayValue || open ? /*#__PURE__*/_jsx(TimePicker, {
-          variant: "borderless",
+          variant: variant ?? fieldProps?.variant,
           format: format,
           ref: ref,
           ...fieldProps,
@@ -80,7 +81,6 @@ const FieldTimePicker = ({
       dom = /*#__PURE__*/_jsx(DatePicker.TimePicker, {
         ref: ref,
         format: format,
-        variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
         ...fieldProps,
         value: dayValue
       });
@@ -111,8 +111,8 @@ const FieldTimeRangePickerComponents = ({
   format = 'HH:mm:ss',
   render,
   formItemRender,
-  plain,
-  fieldProps
+  fieldProps,
+  variant
 }, ref) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
@@ -159,9 +159,10 @@ const FieldTimeRangePickerComponents = ({
         } : undefined,
         label: label,
         disabled: disabled,
+        variant: variant,
         placeholder: placeholder,
         value: dayValue || open ? /*#__PURE__*/_jsx(TimePicker.RangePicker, {
-          variant: "borderless",
+          variant: variant ?? fieldProps?.variant,
           format: format,
           ref: ref,
           ...fieldProps,
@@ -181,7 +182,7 @@ const FieldTimeRangePickerComponents = ({
       dom = /*#__PURE__*/_jsx(TimePicker.RangePicker, {
         ref: ref,
         format: format,
-        variant: plain === undefined ? 'outlined' : plain ? 'borderless' : 'outlined',
+        variant: variant,
         ...fieldProps,
         value: dayValue
       });

package/es/field/components/TreeSelect/index.js

@@ -20,7 +20,7 @@ const FieldTreeSelect = ({
   light,
   label,
   render,
-  variant,
+  variant: propsVariant,
   ...rest
 }, ref) => {
   const {
@@ -41,6 +41,7 @@ const FieldTreeSelect = ({
     searchValue: propsSearchValue,
     ...fieldProps
   } = rest.fieldProps;
+  const variant = propsVariant ?? fieldProps?.variant;
   const intl = useIntl();
   const [loading, options, fetchData] = useFieldFetchData({
     ...rest,
@@ -131,7 +132,6 @@ const FieldTreeSelect = ({
             children: [item.label, " ", itemIndex < valuesLength - 1 ? ',' : '']
           });
         } : undefined,
-        variant: !light ? variant : 'borderless',
         ...fieldProps,
         treeData: options,
         showSearch: showSearch,

package/es/form/BaseForm/BaseForm.js

@@ -370,13 +370,27 @@ export function BaseForm(props) {
   } = props;
   const formRef = useRef({});
   const [loading, setLoadingInner] = useControlledState(false, propsLoading);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onLoadingChangeCallback = useRefFunction(l => {
+    onLoadingChange?.(l);
+  });
+
+  /**
+   * 包装 setLoading，使用 queueMicrotask 延迟回调调用
+   * 避免在渲染阶段调用外部回调导致的 React 警告
+   */
   const setLoading = useCallback(updater => {
     setLoadingInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onLoadingChange?.(next);
+      queueMicrotask(() => {
+        onLoadingChangeCallback(next);
+      });
       return next;
     });
-  }, [onLoadingChange]);
+  }, [onLoadingChangeCallback]);
   const [urlSearch, setUrlSearch] = useUrlSearchParams({}, {
     disabled: !syncToUrl
   });

package/es/form/BaseForm/LightWrapper/index.js

@@ -94,7 +94,13 @@ const LightWrapper = props => {
         onChange: e => {
           setTempValue(e?.target ? e.target.value : e);
         },
-        ...children.props
+        ...children.props,
+        // light 模式下由外层 FilterDropdown 统一描边，内层 Select/TreeSelect/DatePicker 等统一使用 borderless，各 Field 组件无需再根据 light 判断
+        variant: 'borderless',
+        fieldProps: {
+          ...children.props?.fieldProps,
+          variant: 'borderless'
+        }
       })
     })
   }));

package/es/form/BaseForm/Submitter/index.js

@@ -45,7 +45,7 @@ const Submitter = props => {
   const dom = [];
   if (resetButtonProps !== false) {
     dom.push( /*#__PURE__*/_createElement(Button, {
-      ...omit(resetButtonProps ?? {}, ['preventDefault']),
+      ...omit(resetButtonProps ?? {}, ['preventDefault', 'fieldProps']),
       key: "rest",
       onClick: e => {
         if (!resetButtonProps?.preventDefault) reset();
@@ -56,7 +56,7 @@ const Submitter = props => {
   if (submitButtonProps !== false) {
     dom.push( /*#__PURE__*/_createElement(Button, {
       type: "primary",
-      ...omit(submitButtonProps || {}, ['preventDefault']),
+      ...omit(submitButtonProps || {}, ['preventDefault', 'fieldProps']),
       key: "submit",
       onClick: e => {
         if (!submitButtonProps?.preventDefault) submit();

package/es/form/components/DatePicker/DateTimePicker.js

@@ -21,6 +21,7 @@ const ProFormDateTimePicker = /*#__PURE__*/React.forwardRef(({
       valueType,
       customLightMode: true
     },
+    fieldProps: fieldProps,
     ...rest
   });
 });

package/es/form/components/DateRangePicker/DateTimeRangePicker.js

@@ -16,9 +16,7 @@ export const ProFormDateTimeRangePicker = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   return /*#__PURE__*/_jsx(BaseDateRanger, {
     ref: ref,
-    fieldProps: {
-      ...fieldProps
-    },
+    fieldProps: fieldProps,
     valueType: valueType,
     proFieldProps: proFieldProps,
     fieldConfig: {

package/es/form/components/Digit/DigitRange.d.ts

@@ -13,7 +13,7 @@ export type ProFormDigitRangeProps = ProFormFieldItemProps<RangeInputNumberProps
     separatorWidth?: number;
 };
 declare const ForwardRefProFormDigit: React.ForwardRefExoticComponent<{
-    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "defaultValue" | "onChange" | "value" | "placeholder"> & {
+    fieldProps?: Partial<import("../../typing").FieldProps<any> & Omit<InputNumberProps<number>, "value" | "defaultValue" | "onChange" | "placeholder"> & {
         value?: ValuePair | undefined;
         defaultValue?: ValuePair | undefined;
         onChange?: ((value?: ValuePair) => void) | undefined;

package/es/form/components/Field/index.d.ts

@@ -5,7 +5,6 @@ export type ProFormFieldProps<T = any, FiledProps = Record<string, any>> = ProSc
     mode?: 'edit' | 'read' | 'update';
     isDefaultDom?: boolean;
     ref?: any;
-    plain?: boolean;
     text?: any;
     getFieldProps?: () => Record<string, any>;
     getFormItemProps?: () => Record<string, any>;

package/es/form/components/Field/index.js

@@ -1,6 +1,6 @@
-import React, { memo, useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { PureProField } from "../../../field";
-import { isDeepEqualReact, runFunction, useRefFunction } from "../../../utils";
+import { runFunction, useRefFunction } from "../../../utils";
 import { EditOrReadOnlyContext } from "../../BaseForm/EditOrReadOnlyContext";
 import warpField from "../FormItem/warpField";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -86,7 +86,5 @@ const BaseProFormField = props => {
     params: propsParams
   });
 };
-const ProFormField = warpField?.( /*#__PURE__*/memo(BaseProFormField, (prevProps, nextProps) => {
-  return isDeepEqualReact(nextProps, prevProps, ['onChange', 'onBlur']);
-}));
+const ProFormField = warpField?.(BaseProFormField);
 export default ProFormField;

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -130,6 +130,7 @@ export declare const ProFormItemRender: React.FC<Omit<import("antd").FormItemPro
     dataFormat?: string | undefined;
     lightProps?: import("src/form").LightWrapperProps | undefined;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any> | undefined;
 } & {
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;

package/es/form/components/FormItem/Group/index.js

@@ -3,7 +3,7 @@ import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Space } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo } from 'react';
-import { LabelIconTip } from "../../../../utils";
+import { LabelIconTip, useRefFunction } from "../../../../utils";
 import FieldContext from "../../../FieldContext";
 import { useGridHelpers } from "../../../helpers/grid";
 import { useStyle } from "./style";
@@ -34,13 +34,27 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props
   };
   const [collapsed, setCollapsedInner] = useControlledState(() => defaultCollapsed || false, props.collapsed);
+
+  /**
+   * 使用 useRefFunction 包装回调，确保引用稳定
+   */
+  const onCollapseCallback = useRefFunction(c => {
+    props.onCollapse?.(c);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段调用外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"
+   */
   const setCollapsed = useCallback(updater => {
     setCollapsedInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      props.onCollapse?.(next);
+      queueMicrotask(() => {
+        onCollapseCallback(next);
+      });
       return next;
     });
-  }, [props.onCollapse]);
+  }, [onCollapseCallback]);
   const {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);

package/es/form/components/FormItem/index.d.ts

@@ -56,6 +56,7 @@ export type ProFormItemProps = FormItemProps & {
     dataFormat?: string;
     lightProps?: LightWrapperProps;
     proFormFieldKey?: any;
+    fieldProps?: Record<string, any>;
 } & WarpFormItemProps;
 declare const ProFormItem: React.FC<ProFormItemProps>;
 export { FormItemProvide };