fix: 修复 radioGroup 手动清除 value 样式不响应问题 (#536)

src/_util/useDefault.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import noop from './noop';
 
 export interface ChangeHandler<T, P extends any[]> {
@@ -13,6 +13,21 @@ export default function useDefault<T, P extends any[]>(
   // 无论是否受控，都要 useState，因为 Hooks 是无条件的
   const [internalValue, setInternalValue] = useState(defaultValue);
 
+  // 响应手动赋值 undefined, 跳过初始化阶段
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+
+    setInternalValue(value);
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [value]);
+
   // 受控模式
   if (typeof value !== 'undefined') {
     return [value, onChange || noop];

src/radio/RadioGroup.tsx

@@ -64,14 +64,15 @@ const RadioGroup = (props: RadioGroupProps) => {
   const calcBarStyle = () => {
     if (!variant.includes('filled')) return;
     const checkedRadio = groupRef.current.querySelector(checkedRadioCls);
-    if (!checkedRadio) return;
+    if (!checkedRadio) return setBarStyle({ width: 0 });
+
     const { offsetWidth, offsetLeft } = checkedRadio;
     setBarStyle({ width: `${offsetWidth}px`, left: `${offsetLeft}px` });
   };
 
   useEffect(() => {
     calcBarStyle();
-  }, [groupRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [groupRef.current, internalValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useMutationObservable(groupRef.current, calcBarStyle);