update pay ui

src/hooks/useWatchlist.js

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useToast } from '@chakra-ui/react';
 import { logger } from '../utils/logger';
 import { getApiBase } from '../utils/apiConfig';
-import { toggleWatchlist as toggleWatchlistAction } from '../store/slices/stockSlice';
+import { toggleWatchlist as toggleWatchlistAction, loadWatchlist } from '../store/slices/stockSlice';
 
 const WATCHLIST_PAGE_SIZE = 10;
 
@@ -34,12 +34,25 @@ export const useWatchlist = () => {
     const [watchlistPage, setWatchlistPage] = useState(1);
     const [followingEvents, setFollowingEvents] = useState([]);
 
-    // 从 Redux 获取自选股列表（用于监听变化）
+    // 从 Redux 获取自选股列表长度（用于监听变化）
-    const reduxWatchlist = useSelector(state => state.stock.watchlist);
+    // 使用 length 作为依赖，避免数组引用变化导致不必要的重新渲染
+    const reduxWatchlistLength = useSelector(state => state.stock.watchlist?.length || 0);
 
-    // 用于跟踪上一次的 watchlist 长度，避免初始加载时重复请求
+    // 检查 Redux watchlist 是否已初始化（加载状态）
-    const prevWatchlistLengthRef = useRef(reduxWatchlist?.length || 0);
+    const reduxWatchlistLoading = useSelector(state => state.stock.loading?.watchlist);
-    const isInitialMount = useRef(true);
+
+    // 用于跟踪上一次的 watchlist 长度
+    const prevWatchlistLengthRef = useRef(-1); // 初始设为 -1，确保第一次变化也能检测到
+
+    // 初始化时加载 Redux watchlist（确保 Redux 状态被初始化）
+    const hasInitializedRef = useRef(false);
+    useEffect(() => {
+        if (!hasInitializedRef.current) {
+            hasInitializedRef.current = true;
+            logger.debug('useWatchlist', '初始化 Redux watchlist');
+            dispatch(loadWatchlist());
+        }
+    }, [dispatch]);
 
     // 加载自选股实时行情
     const loadWatchlistQuotes = useCallback(async () => {
@@ -55,6 +68,7 @@ export const useWatchlist = () => {
                 const data = await resp.json();
                 if (data && data.success && Array.isArray(data.data)) {
                     setWatchlistQuotes(data.data);
+                    logger.debug('useWatchlist', '自选股行情加载成功', { count: data.data.length });
                 } else {
                     setWatchlistQuotes([]);
                 }
@@ -71,34 +85,32 @@ export const useWatchlist = () => {
         }
     }, []);
 
-    // 监听 Redux watchlist 变化，自动刷新行情数据
+    // 监听 Redux watchlist 长度变化，自动刷新行情数据
     useEffect(() => {
-        // 跳过初始挂载（初始加载由 HomeNavbar 触发）
+        const currentLength = reduxWatchlistLength;
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            prevWatchlistLengthRef.current = reduxWatchlist?.length || 0;
-            return;
-        }
-
-        const currentLength = reduxWatchlist?.length || 0;
         const prevLength = prevWatchlistLengthRef.current;
 
         // 只有当 watchlist 长度发生变化时才刷新
-        if (currentLength !== prevLength) {
+        // prevLength = -1 表示初始状态，此时不触发刷新（由菜单打开时触发）
-            logger.debug('useWatchlist', 'Redux watchlist 变化，刷新行情', {
+        if (prevLength !== -1 && currentLength !== prevLength) {
+            logger.debug('useWatchlist', 'Redux watchlist 长度变化，刷新行情', {
                 prevLength,
                 currentLength
             });
-            prevWatchlistLengthRef.current = currentLength;
 
             // 延迟一小段时间再刷新，确保后端数据已更新
             const timer = setTimeout(() => {
+                logger.debug('useWatchlist', '执行 loadWatchlistQuotes');
                 loadWatchlistQuotes();
-            }, 300);
+            }, 500);
 
+            prevWatchlistLengthRef.current = currentLength;
             return () => clearTimeout(timer);
         }
-    }, [reduxWatchlist, loadWatchlistQuotes]);
+
+        // 更新 ref
+        prevWatchlistLengthRef.current = currentLength;
+    }, [reduxWatchlistLength, loadWatchlistQuotes]);
 
     // 从自选股移除（同时更新 Redux 和本地状态）
     const handleRemoveFromWatchlist = useCallback(async (stockCode) => {