diff --git a/app/analytics/page.tsx b/app/analytics/page.tsx index 886afa2..c767beb 100644 --- a/app/analytics/page.tsx +++ b/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(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(null); const [events, setEvents] = useState([]); - 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 = () => {