events date range 7days

app/(app)/links/[id]/page.tsx

@@ -186,66 +186,6 @@ export default function LinkDetailsPage({
     }
   }, [dateRange, timeGranularity]);
 
-  // 获取并设置linkId
-  useEffect(() => {
-    const loadParams = async () => {
-      const resolvedParams = await params;
-      setLinkId(resolvedParams.id);
-    };
-
-    loadParams();
-  }, [params]);
-
-  // 获取链接详情数据
-  useEffect(() => {
-    if (!linkId) return;
-    
-    const fetchLinkDetails = async () => {
-      setLoading(true);
-      try {
-        // 获取链接详情
-        const response = await fetch(`/api/links/${linkId}/details`);
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.message || "Failed to fetch link details");
-        }
-        
-        const details = await response.json();
-        console.log("Link details:", details); // 添加日志以确认 API 响应
-        
-        // 将 API 返回的数据映射到组件需要的格式
-        setLinkDetails({
-          id: details.link_id || linkId,
-          name: details.title || "Untitled Link",
-          shortUrl: details.short_url || window.location.hostname + "/" + details.link_id,
-          originalUrl: details.original_url || "",
-          creator: details.created_by || "Unknown",
-          createdAt: details.created_at || new Date().toISOString(),
-          visits: details.visits || 0,
-          visitChange: details.visit_change || 0,
-          uniqueVisitors: details.unique_visitors || 0,
-          uniqueVisitorsChange: details.unique_visitors_change || 0,
-          avgTime: formatTime(details.avg_time_spent || 0),
-          avgTimeChange: details.avg_time_change || 0,
-          conversionRate: details.conversion_rate || 0,
-          conversionChange: details.conversion_change || 0,
-          status: details.is_active ? "active" : "inactive",
-          tags: details.tags || [],
-        });
-        
-        setLoading(false);
-        
-        // 获取分析数据
-        fetchAnalyticsData(linkId);
-      } catch (error) {
-        console.error("Failed to fetch link details:", error);
-        setLoading(false);
-      }
-    };
-
-    fetchLinkDetails();
-  }, [linkId, fetchAnalyticsData]);
-
   // 格式化时间（秒转为分钟和秒）
   const formatTime = (seconds: number) => {
     const minutes = Math.floor(seconds / 60);
@@ -253,6 +193,59 @@ export default function LinkDetailsPage({
     return `${minutes}m ${remainingSeconds}s`;
   };
 
+  // 将 fetchLinkDetails 移到 useEffect 外面
+  const fetchLinkDetails = useCallback(async (id: string) => {
+    setLoading(true);
+    try {
+      // 获取链接详情
+      const response = await fetch(`/api/links/${id}/details`);
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to fetch link details");
+      }
+      
+      const details = await response.json();
+      console.log("Link details:", details); // 添加日志以确认 API 响应
+      
+      // 将 API 返回的数据映射到组件需要的格式
+      setLinkDetails({
+        id: details.link_id || id,
+        name: details.title || "Untitled Link",
+        shortUrl: details.short_url || window.location.hostname + "/" + details.link_id,
+        originalUrl: details.original_url || "",
+        creator: details.created_by || "Unknown",
+        createdAt: details.created_at || new Date().toISOString(),
+        visits: details.visits || 0,
+        visitChange: details.visit_change || 0,
+        uniqueVisitors: details.unique_visitors || 0,
+        uniqueVisitorsChange: details.unique_visitors_change || 0,
+        avgTime: formatTime(details.avg_time_spent || 0),
+        avgTimeChange: details.avg_time_change || 0,
+        conversionRate: details.conversion_rate || 0,
+        conversionChange: details.conversion_change || 0,
+        status: details.is_active ? "active" : "inactive",
+        tags: details.tags || [],
+      });
+      
+      setLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch link details:", error);
+      setLoading(false);
+    }
+  }, []);
+
+  // 获取并设置linkId - 移除异步获取参数的逻辑，因为params已经可用
+  useEffect(() => {
+    // 直接使用params.id
+    if (params.id) {
+      setLinkId(params.id);
+      fetchLinkDetails(params.id);
+      fetchAnalyticsData(params.id);
+    }
+  }, [params.id, fetchLinkDetails, fetchAnalyticsData]);
+
+  // 获取链接详情数据 - 这个 useEffect 可以删除，已合并到上面的 useEffect
+  
   // 更新时间粒度并重新获取趋势数据
   const updateTimeGranularity = (granularity: TimeGranularity) => {
     setTimeGranularity(granularity);