From f031a0aad4fef2bef0dc658c16c6d67483f4cb07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <645381995@qq.com>
Date: Thu, 30 Nov 2023 15:35:23 +0800
Subject: [PATCH] feat: support selector

---
 package.json                           |  2 +-
 src/components/form/form-subscribe.tsx | 33 ++++----------------------
 2 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index a3c57f84c2..ab1f54223a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "rc-field-form": "~1.27.4",
+    "rc-field-form": "~1.41.0",
     "rc-util": "^5.30.0",
     "react-is": "^18.2.0",
     "runes2": "^1.1.2",
diff --git a/src/components/form/form-subscribe.tsx b/src/components/form/form-subscribe.tsx
index deab7f1172..0269f05454 100644
--- a/src/components/form/form-subscribe.tsx
+++ b/src/components/form/form-subscribe.tsx
@@ -1,10 +1,9 @@
-import React, { memo, useContext } from 'react'
+import React, { useContext } from 'react'
 import type { FC, ReactNode } from 'react'
 import { FieldContext, useWatch } from 'rc-field-form'
-import { useUpdate } from 'ahooks'
 import type { FormInstance } from 'rc-field-form'
 import type { NamePath } from 'rc-field-form/es/interface'
-import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
+import pick from 'lodash/pick'
 
 type RenderChildren<Values = any> = (
   changedValues: Record<string, any>,
@@ -18,9 +17,9 @@ export interface FormSubscribeProps {
 }
 
 export const FormSubscribe: FC<FormSubscribeProps> = props => {
-  const update = useUpdate()
   const form = useContext(FieldContext)
 
+  useWatch(values => pick(values, props.to), form)
   const value = form.getFieldsValue(props.to)
 
   // Memo to avoid useless render
@@ -29,29 +28,5 @@ export const FormSubscribe: FC<FormSubscribeProps> = props => {
     [JSON.stringify(value), props.children]
   )
 
-  return (
-    <>
-      {childNode}
-      {props.to.map(namePath => (
-        <Watcher
-          key={namePath.toString()}
-          form={form}
-          namePath={namePath}
-          onChange={update}
-        />
-      ))}
-    </>
-  )
+  return <>{childNode}</>
 }
-
-export const Watcher = memo<{
-  form: FormInstance
-  namePath: NamePath
-  onChange: () => void
-}>(props => {
-  const value = useWatch(props.namePath, props.form)
-  useIsomorphicUpdateLayoutEffect(() => {
-    props.onChange()
-  }, [value])
-  return null
-})