fix: percent value invalid (#2782)

* fix: percent value invalid

* fix: useMemo

packages/core/client/src/schema-component/antd/percent/Percent.tsx

@@ -1,29 +1,36 @@
 import { connect, mapReadPretty } from '@formily/react';
+import { isNumberLike } from '@formily/shared';
 import { InputNumber } from 'antd';
 import * as math from 'mathjs';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ReadPretty } from '../input-number/ReadPretty';
 
+const toValue = (value: any, callback: (v: number) => number) => {
+  if (isNumberLike(value)) {
+    return math.round(callback(value), 9);
+  }
+  return null;
+};
+
 export const Percent = connect(
   (props) => {
     const { value, onChange } = props;
-
+    const v = useMemo(() => toValue(value, (v) => v * 100), [value]);
     return (
       <InputNumber
         {...props}
         addonAfter="%"
-        defaultValue={value ? math.round(value * 100, 9) : null}
+        value={v}
-        formatter={(v: any) => (v ? math.round(v * 100, 9) : null)}
         onChange={(v: any) => {
           if (onChange) {
-            const val = v ? math.round(v / 100, 9) : 0;
+            onChange(toValue(v, (v) => v / 100));
-            onChange(val);
           }
         }}
       />
     );
   },
   mapReadPretty((props) => {
-    return <ReadPretty {...props} value={props.value ? math.round(props.value * 100, 9) : null} />;
+    const value = useMemo(() => toValue(props.value, (v) => v * 100), [props.value]);
+    return <ReadPretty {...props} value={value} />;
   }),
 );