fix(form): default close swr cache (#4470)

* fix(form): use new uuid function * fix(form): default close swr cache * fix test * fix test * fix test * fix test
ant-design · Jan 15, 2022 · 770a0fb · 770a0fb
1 parent a9394e2
commit 770a0fb
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 10 deletions.
diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -9,7 +9,8 @@ import React, {
   useEffect,
 } from 'react';
 import { Space, Spin, ConfigProvider } from 'antd';
-import type {
+import {
+  nanoid,
   ProFieldRequestData,
   ProFieldValueEnumType,
   ProSchemaValueEnumMap,
@@ -28,8 +29,6 @@ import TableStatus, { ProFieldBadgeColor } from '../Status';
 import type { ProFieldFC } from '../../index';
 import './index.less';
 
-let testId = 0;
-
 type SelectOptionType = Partial<RequestOptionsType>[];
 
 export type FieldSelectProps<FieldProps = any> = {
@@ -262,8 +261,7 @@ export const useFieldFetchData = (
       return props.proFieldKey.toString();
     }
     if (props.request) {
-      testId += 1;
-      return testId.toString();
+      return nanoid();
     }
     return 'no-fetch';
   });
@@ -408,10 +406,6 @@ const FieldSelect: ProFieldFC<FieldSelectProps> = (props, ref) => {
   const intl = useIntl();
   const keyWordsRef = useRef<string>('');
 
-  useEffect(() => {
-    testId += 1;
-  }, []);
-
   useEffect(() => {
     keyWordsRef.current = fieldProps?.searchValue;
   }, [fieldProps?.searchValue]);

diff --git a/packages/form/src/BaseForm/createField.tsx b/packages/form/src/BaseForm/createField.tsx
@@ -43,7 +43,7 @@ function createField<P extends ProFormFieldItemProps = any>(
   Field: React.ComponentType<P> | React.ForwardRefExoticComponent<P>,
   config?: ProFormItemCreateConfig,
 ): ProFormComponent<P, ExtendsProps> {
-  // 标记是否是 proform 的组件
+  // 标记是否是 ProForm 的组件
   // @ts-ignore
   // eslint-disable-next-line no-param-reassign
   Field.displayName = 'ProFormComponent';
@@ -74,6 +74,7 @@ function createField<P extends ProFormFieldItemProps = any>(
       colSize,
       formItemProps: propsFormItemProps,
       filedConfig,
+      cacheForSwr,
       ...rest
     } = { ...defaultProps, ...props } as P & ExtendsProps;
 
@@ -130,7 +131,10 @@ function createField<P extends ProFormFieldItemProps = any>(
 
     const { prefixName } = useContext(RcFieldContext);
     const proFieldKey = useMemo(() => {
+      /** 如果没有cacheForSwr，默认关掉缓存 只有table中默认打开，form中打开问题还挺多的，有些场景name 会相同 */
+      if (!cacheForSwr) return undefined;
       let name = otherProps?.name;
+      if (Array.isArray(name)) name = name.join('_');
       if (Array.isArray(prefixName) && name) name = `${prefixName.join('.')}.${name}`;
       return name && `form-field-${name}`;
       // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/form/src/components/Field/index.tsx b/packages/form/src/components/Field/index.tsx
@@ -46,6 +46,7 @@ class ProFormField extends React.Component<
       valueEnum,
       params,
       name,
+      cacheForSwr = false,
       valuePropName = 'value',
       ...restProps
     } = this.props;
@@ -57,6 +58,7 @@ class ProFormField extends React.Component<
         render={render as any}
         renderFormItem={renderFormItem as any}
         valueType={(valueType as 'text') || 'text'}
+        cacheForSwr={cacheForSwr}
         fieldProps={{
           autoFocus,
           ...fieldProps,

diff --git a/packages/form/src/demos/base.tsx b/packages/form/src/demos/base.tsx
@@ -127,6 +127,7 @@ export default () => {
           ]}
           readonly
           width="xs"
+          cacheForSwr
           name="useMode"
           label="合同约定生效方式"
         />

diff --git a/packages/form/src/interface.ts b/packages/form/src/interface.ts
@@ -100,6 +100,8 @@ export type ProFormFieldItemProps<T = Record<string, any>> = {
   placeholder?: string | string[];
   secondary?: boolean;
   allowClear?: boolean;
+  /** 是否使用 swr 来缓存 缓存可能导致数据更新不及时，请谨慎使用，尤其是页面中多个组件 name相同 */
+  cacheForSwr?: boolean;
   disabled?: boolean;
   /**
    * @type auto 使用组件默认的宽度

diff --git a/packages/table/src/utils/cellRenderToFromItem.tsx b/packages/table/src/utils/cellRenderToFromItem.tsx
@@ -114,6 +114,7 @@ class CellRenderFromItem<T> extends React.Component<
     };
     const inputDom = (
       <ProFormField
+        cacheForSwr
         key={config.recordKey || config.index}
         name={this.state.name}
         ignoreFormItem

diff --git a/packages/utils/src/hooks/useDebounceFn/index.ts b/packages/utils/src/hooks/useDebounceFn/index.ts
@@ -79,6 +79,7 @@ function useDebounceFn<T extends any[], U = any>(
       if (wait !== 0) rejectRef.current?.(new Error('useDebounceFn is unmount'));
       cancel();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {

diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx
@@ -70,6 +70,7 @@ import { arrayMoveImmutable } from './array-move';
 import { merge } from './merge';
 import { genCopyable } from './genCopyable';
 import { useRefFunction } from './hooks/useRefFunction';
+import { nanoid } from './nanoid';
 
 export type {
   RequestOptionsType,
@@ -132,6 +133,7 @@ export {
   runFunction,
   getFieldPropsOrFormItemProps,
   dateArrayFormatter,
+  nanoid,
   // hooks
   useEditableArray,
   useEditableMap,

diff --git a/packages/utils/src/nanoid/index.ts b/packages/utils/src/nanoid/index.ts
@@ -0,0 +1,29 @@
+/* eslint-disable prefer-const */
+let genNanoid = (t = 21) => {
+  let e = '',
+    r = crypto.getRandomValues(new Uint8Array(t));
+  // eslint-disable-next-line no-param-reassign
+  for (; t--; ) {
+    let n = 63 & r[t];
+    e +=
+      n < 36 ? n.toString(36) : n < 62 ? (n - 26).toString(36).toUpperCase() : n < 63 ? '_' : '-';
+  }
+  return e;
+};
+
+/**
+ * 生成uuid，如果不支持 randomUUID，就用 genNanoid
+ *
+ * @returns
+ */
+export const nanoid = () => {
+  if (typeof window === 'undefined') {
+    return genNanoid();
+  }
+  // @ts-ignore
+  if (crypto && crypto.randomUUID && typeof crypto.randomUUID == 'function') {
+    // @ts-ignore
+    return crypto.randomUUID();
+  }
+  return genNanoid();
+};