refactor: useWidgetRowHeight

Author: xieliuduo

frontend/src/app/hooks/useWidgetRowHeight.ts

@@ -21,15 +21,22 @@ import {
   BASE_VIEW_WIDTH,
   MIN_ROW_HEIGHT,
 } from 'app/pages/DashBoardPage/constants';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useResizeObserver from './useResizeObserver';
 
 export const useWidgetRowHeight = () => {
+  const [cacheW, setCacheW] = useState(0);
   const { ref, width = 0 } = useResizeObserver<HTMLDivElement>();
+
+  useEffect(() => {
+    if (width > 0) {
+      setCacheW(width);
+    }
+  }, [width]);
   const widgetRowHeight = useMemo(() => {
-    let dynamicHeight = (width * BASE_ROW_HEIGHT) / BASE_VIEW_WIDTH;
+    let dynamicHeight = (cacheW * BASE_ROW_HEIGHT) / BASE_VIEW_WIDTH;
     return Math.max(dynamicHeight, MIN_ROW_HEIGHT);
-  }, [width]);
+  }, [cacheW]);
   return {
     ref,
     widgetRowHeight,