fix: Fixed bug where useWatch did not update as expected when setFiel…

…dsValue was set (#126)

Co-authored-by: wuxiuran <wuxiuran@kezaihui.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaihui/hui-design",
-  "version": "0.0.1-beta.72",
+  "version": "0.0.1-beta.76",
   "description": "小程序组件库",
   "templateInfo": {
     "name": "mobx",

src/components/Form/FormItem/index.tsx

@@ -33,7 +33,8 @@ import { useId } from '../../../utils/hooks'
  */
 const Item: React.FC<HuiFormItemProps> = (props) => {
   const context = useContext<FieldContext>(Context)
-  const { registerWatch, getFieldValue, setFieldValue } = context
+  const { registerWatch, getFieldValue, setFieldValue, removeFieldValue } =
+    context
   const listContext = useContext<FormListContextProps>(FormListContext)
   const [renderType, setRenderType] = useState<keyof ItemType>('other')
   const [, update] = useState({})
@@ -180,6 +181,9 @@ const Item: React.FC<HuiFormItemProps> = (props) => {
     validatorRules(localValue)
   }, [localValue])
 
+  // 组件卸载后移出字段
+  useEffect(() => () => removeFieldValue(path), [path, removeFieldValue])
+
   useEffect(() => {
     const unMount = registerWatch(id, {
       name: path,

src/components/Form/FormStore/index.ts

@@ -150,15 +150,17 @@ class FormStore {
   }
 
   notifywatchList(name?: string | string[]): void {
+    if (!name) {
+      this.fieldWatchList.forEach((fns) => fns.forEach((fn) => fn(this.store)))
+    }
     this.watchList.forEach((field: any) => {
       const { onStoreChange } = field
       const fieldName = toString(field.name)
 
-      if (this.fieldWatchList.has(fieldName)) {
-        this.fieldWatchList.get(fieldName).forEach((fn) => fn(this.store))
-      }
-
       if (name) {
+        if (this.fieldWatchList.has(fieldName)) {
+          this.fieldWatchList.get(fieldName).forEach((fn) => fn(this.store))
+        }
         if (toString(name) === fieldName) {
           onStoreChange()
         }