persisten storge

app/analytics/page.tsx

@@ -119,6 +119,7 @@ const extractEventInfo = (event: Event) => {
 export default function AnalyticsPage() {
   // 从 URL 获取查询参数
   const searchParams = useSearchParams();
+  const router = useRouter();
   const shorturlParam = searchParams.get('shorturl');
   
   // 使用 Zustand store
@@ -127,8 +128,25 @@ export default function AnalyticsPage() {
   // 存储 shorturl 参数
   const [selectedShortUrlString, setSelectedShortUrlString] = useState<string | null>(null);
   
+  // Track hydration state of Zustand persistence
+  const [isHydrated, setIsHydrated] = useState(false);
+  
+  // Flag to trigger data fetching
+  const [shouldFetchData, setShouldFetchData] = useState(false);
+  
+  // Set hydrated state after initial render
+  useEffect(() => {
+    const hydrateTimeout = setTimeout(() => {
+      setIsHydrated(true);
+    }, 100); // Small timeout to ensure store is hydrated
+    
+    return () => clearTimeout(hydrateTimeout);
+  }, []);
+  
   // 从 API 加载短链接数据
   useEffect(() => {
+    if (!isHydrated) return; // Skip if not hydrated yet
+    
     // 处理 URL 参数
     if (shorturlParam) {
       // 保存参数到状态
@@ -143,7 +161,10 @@ export default function AnalyticsPage() {
           try {
             const parsedData = JSON.parse(localStorageData);
             if (parsedData.state?.selectedShortUrl && parsedData.state.selectedShortUrl.shortUrl === shorturlParam) {
-              // 数据已存在于 localStorage 且匹配 URL 参数，无需操作
+              // 数据已存在于 localStorage 且匹配 URL 参数，直接从 localStorage 中设置
+              setSelectedShortUrl(parsedData.state.selectedShortUrl);
+              // Trigger data fetching
+              setShouldFetchData(true);
               return;
             }
           } catch (e) {
@@ -165,6 +186,8 @@ export default function AnalyticsPage() {
             
             if (!response.ok) {
               console.error('Failed to fetch shorturl data:', response.statusText);
+              // Trigger data fetching even if shortURL data fetch failed
+              setShouldFetchData(true);
               return;
             }
             
@@ -176,12 +199,20 @@ export default function AnalyticsPage() {
               // 设置到 Zustand store (会自动更新到 localStorage)
               setSelectedShortUrl(result.data);
             }
+            
+            // Trigger data fetching after shortURL data is processed
+            setShouldFetchData(true);
           } catch (error) {
             console.error('Error fetching shorturl data:', error);
+            // Trigger data fetching even if there was an error
+            setShouldFetchData(true);
           }
         };
         
         fetchShortUrlData();
+      } else {
+        // If selectedShortUrl already matches URL parameter, trigger data fetching
+        setShouldFetchData(true);
       }
     } else {
       // 如果 URL 没有参数，清除文本状态
@@ -189,8 +220,11 @@ export default function AnalyticsPage() {
       
       // 如果 URL 没有参数但 store 中有数据，我们保持 store 中的数据不变
       // 这样用户在清除 URL 参数后仍能看到之前选择的短链接数据
+      
+      // Trigger data fetching since no shorturl parameter in URL
+      setShouldFetchData(true);
     }
-  }, [shorturlParam, selectedShortUrl, setSelectedShortUrl]);
+  }, [shorturlParam, selectedShortUrl, setSelectedShortUrl, isHydrated]);
   
   // 默认日期范围为最近7天
   const today = new Date();
@@ -218,12 +252,12 @@ export default function AnalyticsPage() {
   const [deviceData, setDeviceData] = useState<DeviceAnalyticsType | null>(null);
   const [events, setEvents] = useState<Event[]>([]);
 
-  const router = useRouter();
-
   // 添加 Snackbar 状态
   const [isSnackbarOpen, setIsSnackbarOpen] = useState(false);
 
   useEffect(() => {
+    if (!shouldFetchData) return; // Don't fetch data until explicitly triggered
+    
     const fetchData = async () => {
       setLoading(true);
       setError(null);
@@ -313,7 +347,7 @@ export default function AnalyticsPage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagNames, currentPage, pageSize, selectedShortUrl]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagNames, currentPage, pageSize, selectedShortUrl, shouldFetchData]);
 
   // Function to clear the shorturl filter
   const handleClearShortUrlFilter = () => {