fix: 修复label类型导致hooks内存溢出

AntmJS · Mar 27, 2023 · 3d4bac2 · 3d4bac2
1 parent 89de933
commit 3d4bac2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/packages/vantui/src/form-item/index.tsx b/packages/vantui/src/form-item/index.tsx
@@ -23,6 +23,7 @@ export function FormItem(props: FormItemProps) {
     layout = 'horizontal',
     children,
     label,
+    labelName,
     required = false,
     rules = {},
     trigger = 'onChange',
@@ -44,6 +45,17 @@ export function FormItem(props: FormItemProps) {
   const [, forceUpdate_] = useState({})
   const _name = Array.isArray(name) ? name.join('.') : name
 
+  const _label = useMemo(() => {
+    let l = ''
+    if (typeof label === 'string') {
+      l = label
+    } else if (labelName) {
+      l = labelName
+    }
+
+    return l
+  }, [label, labelName])
+
   const onStoreChange = useMemo(() => {
     const onStoreChange = {
       changeValue() {
@@ -60,6 +72,7 @@ export function FormItem(props: FormItemProps) {
         rules,
         required,
         mutiLevel,
+        label: _label,
       })
   }, [
     _name,
@@ -69,6 +82,7 @@ export function FormItem(props: FormItemProps) {
     required,
     rules,
     unRegisterValidate,
+    _label,
   ])
 
   useEffect(function () {

diff --git a/packages/vantui/src/form/core/formstore.ts b/packages/vantui/src/form/core/formstore.ts
@@ -26,7 +26,7 @@ const formInstanceApi = [
 const isReg = (value: any) => value instanceof RegExp
 class FormStore {
   static instance: FormStore
-  public requiredMessageCallback?: (fieldName: string) => string
+  public requiredMessageCallback?: (label: string) => string
   public FormUpdate: () => any
   public model: Record<string, any>
   public control: Record<string, any>
@@ -54,18 +54,19 @@ class FormStore {
     }, {})
   }
 
-  registerRequiredMessageCallback(callback: (fieldName: string) => string) {
+  registerRequiredMessageCallback(callback: (label: string) => string) {
     this.requiredMessageCallback = callback
   }
 
   static createValidate(validateModal: any) {
-    const { value, required, rules } = validateModal
+    const { value, required, rules, label } = validateModal
 
     return {
       value,
       rules: Array.isArray(rules) ? rules : [rules],
       required: required || false,
       status: 'pendding',
+      label,
     }
   }
 
@@ -143,10 +144,7 @@ class FormStore {
       !this.model[name] || this.model[name].value === undefined
 
     const validate = FormStore.createValidate(model)
-    this.model[name] = {
-      ...validate,
-      name,
-    }
+    this.model[name] = validate
     this.control[name] = control
 
     if (shouldUpdate) {
@@ -366,10 +364,14 @@ class FormStore {
       status = 'reject'
       if (this.requiredMessageCallback) {
         this.model[name].message = this.requiredMessageCallback(
-          this.model[name].name,
+          this.model[name].label,
         )
       } else {
-        this.model[name].message = '字段不能为空'
+        if (this.model[name].label) {
+          this.model[name].message = this.model[name].label + '不能为空'
+        } else {
+          this.model[name].message = '此处不能为空'
+        }
       }
     }
 

diff --git a/packages/vantui/types/form.d.ts b/packages/vantui/types/form.d.ts
@@ -58,6 +58,10 @@ export interface FormItemProps extends ViewProps {
    * @description 表单label
    */
   label: ReactNode
+  /**
+   * @description 表单label字符串, 当label不为字符串的时候，传入labelName
+   */
+  labelName?: string
   /**
    * @description 垂直 ｜ 水平
    * @default horizontal