Fix bug20240409

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaihui/hui-design",
-  "version": "0.0.1-beta.61",
+  "version": "0.0.1-beta.62",
   "description": "小程序组件库",
   "templateInfo": {
     "name": "mobx",
@@ -14,7 +14,7 @@
   "main": "lib/index.js",
   "module": "lib/index.js",
   "scripts": {
-    "setup": "yarn install --frozen-lockfile",
+    "setup": "yarn config set strict-ssl false && yarn install --frozen-lockfile",
     "depup": "yarn upgrade-interactive --latest",
     "lint:style": "stylelint 'src/**/*.scss' --syntax scss",
     "lint:style:fix": "prettier --check --write src/**/*.scss && npm run lint:style -- --fix",

src/components/Form/FormItem/index.tsx

@@ -26,21 +26,23 @@ import Context, {
   AlignType,
 } from '../constants'
 import { toArray } from '../util'
+import { useId } from '../../../utils/hooks'
 
 /**
  * form表单基础组件
  */
 const Item: React.FC<HuiFormItemProps> = (props) => {
   const context = useContext<FieldContext>(Context)
-  const { registerWatch, getFieldValue, setFieldValue, removeFieldValue } =
-    context
+  const { registerWatch, getFieldValue, setFieldValue } = context
   const listContext = useContext<FormListContextProps>(FormListContext)
   const [renderType, setRenderType] = useState<keyof ItemType>('other')
   const [, update] = useState({})
   const [submitTotal, setSubmitTotal] = useState(0)
   const [ruleCss, setRuleCss] = useState<string>(NormalCss)
   const [ruleText, setRuleText] = useState<string>()
 
+  const id = useId()
+
   const newProps = useRef<{
     onChange?: (event: any) => void
     value?: string
@@ -141,37 +143,44 @@ const Item: React.FC<HuiFormItemProps> = (props) => {
     !!ruleText,
   )
 
-  const validatorRules = async (value: string) => {
-    try {
-      const [css, text] = validatorField(rule, value, renderType, getFieldValue)
-
-      setRuleCss(css)
-      setRuleText(text)
-      return {
-        state: !text,
-        name: path,
+  const validatorRules = useCallback(
+    async (value: string) => {
+      try {
+        const [css, text] = validatorField(
+          rule,
+          value,
+          renderType,
+          getFieldValue,
+        )
+
+        setRuleCss(css)
+        setRuleText(text)
+        return {
+          state: !text,
+          name: path,
+        }
+      } catch (error) {
+        throw new Error(error)
       }
-    } catch (error) {
-      throw new Error(error)
-    }
-  }
+    },
+    [getFieldValue, path, renderType, rule],
+  )
 
   useEffect(() => {
     validatorRules(localValue)
   }, [localValue])
 
   useEffect(() => {
-    const unMount = registerWatch({
+    const unMount = registerWatch(id, {
       name: path,
       setSubmitTotal,
       validatorRules,
       onStoreChange: () => update({}),
     } as any)
     return () => {
-      removeFieldValue(path)
       unMount()
     }
-  }, [path, registerWatch])
+  }, [id, path, registerWatch, validatorRules])
 
   useEffect(() => {
     if (submitTotal) implementAnimation()

src/components/Form/FormStore/index.ts

@@ -17,7 +17,7 @@ type Store = any
 class FormStore {
   store: Store
 
-  watchList: any[]
+  watchList: Map<string, any>
 
   callbacks: Callbacks
 
@@ -33,7 +33,7 @@ class FormStore {
      * onStoreChange - 更新方法
      * rules - 规则
      */
-    this.watchList = []
+    this.watchList = new Map()
 
     this.callbacks = {
       onFinish() {},
@@ -47,10 +47,10 @@ class FormStore {
     this.timer = undefined
   }
 
-  registerWatch(field: registerWatchType): () => void {
-    this.watchList.push(field)
+  registerWatch(id: string, field: registerWatchType): () => void {
+    this.watchList.set(id, field)
     return () => {
-      this.watchList = this.watchList.filter((e) => e !== field)
+      this.watchList.delete(id)
     }
   }
 
@@ -131,9 +131,10 @@ class FormStore {
 
   async validatorFields(): Promise<void | null | string> {
     const errorValiadtorArr: any[] = []
-    const valiadtorPromiseArr = this.watchList.map(({ validatorRules, name }) =>
-      validatorRules(this.getFieldValue(name) ?? ''),
-    )
+    const valiadtorPromiseArr: any[] = []
+    this.watchList.forEach(({ validatorRules, name }) => {
+      valiadtorPromiseArr.push(validatorRules(this.getFieldValue(name) ?? ''))
+    })
 
     const allRes = await Promise.all(valiadtorPromiseArr)
 
@@ -185,9 +186,10 @@ class FormStore {
     const { onReset } = this.callbacks
     try {
       this.resetStore()
-      const arr = this.watchList.map(({ validatorRules }) =>
-        validatorRules(undefined),
-      )
+      const arr: any = []
+      this.watchList.forEach(({ validatorRules }) => {
+        arr.push(validatorRules(undefined))
+      })
       await Promise.all(arr)
       onReset()
     } catch (error) {}

src/components/Form/constants/index.tsx

@@ -11,7 +11,7 @@ export interface registerWatchType {
 }
 
 export interface FieldContext {
-  /** 获取单个表单数据 */
+  /** 删除单个表单数据 */
   removeFieldValue: (name: string | string[]) => void
   /** 获取单个表单数据 */
   getFieldValue: (name: string | string[]) => any
@@ -24,7 +24,7 @@ export interface FieldContext {
   /** 验证表单 */
   validatorFields: () => any
   /** 注册监听 */
-  registerWatch: (filed: registerWatchType) => any
+  registerWatch: (id: string, filed: registerWatchType) => any
   /** 设置回调函数 */
   setCallbacks: (callbacks: any) => any
   /** 提交表单 */

src/utils/hooks.ts

@@ -1,5 +1,6 @@
 import Taro from '@tarojs/taro'
 import { useEffect, useState } from 'react'
+import { generateUuid } from '.'
 
 export const useBoundingClientRect: <T extends Element | null | undefined>(
   ref: React.MutableRefObject<T>,
@@ -31,3 +32,8 @@ export const useBoundingClientRect: <T extends Element | null | undefined>(
 
   return info
 }
+
+export const useId = (): string => {
+  const [id] = useState(generateUuid())
+  return id
+}

src/utils/index.ts

@@ -136,3 +136,8 @@ export const getTimerFormatSeparator = (
   minute: format.split('mm')?.[1]?.[0],
   second: format.split('ss')?.[1]?.[0],
 })
+
+export const generateUuid = (length = 5): string =>
+  Number(Math.random().toString().substring(3, length) + Date.now()).toString(
+    36,
+  )

yarn.lock

@@ -23594,4 +23594,4 @@ z-schema@~5.0.2:
 zepto@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/zepto/download/zepto-1.2.0.tgz#e127bd9e66fd846be5eab48c1394882f7c0e4f98"
-  integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=
+  integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=