feat:使用 ref 避免 filters 依赖导致回调重新创建

src/views/Community/hooks/useEventFilters.js

@@ -1,7 +1,7 @@
 // src/views/Community/hooks/useEventFilters.js
 // 事件筛选逻辑 Hook
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { logger } from '../../../utils/logger';
 import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
@@ -31,78 +31,90 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
     };
   });
 
+  // 🔧 使用 ref 存储最新的 filters，避免 useCallback 依赖 filters 导致重新创建
+  const filtersRef = useRef(filters);
+  useEffect(() => {
+    filtersRef.current = filters;
+  }, [filters]);
+
   // 更新筛选参数 - 直接替换（由 UnifiedSearchBox 输出完整参数）
   const updateFilters = useCallback((newFilters) => {
+    // 🔧 从 ref 读取最新的 filters，避免依赖 filters 状态
+    const currentFilters = filtersRef.current;
+
     logger.debug('useEventFilters', '🔄 【接收到onSearch回调】updateFilters 接收到完整参数', {
       newFilters: newFilters,
-      oldFilters: filters,
+      oldFilters: currentFilters,
       timestamp: new Date().toISOString()
     });
 
     // 🎯 PostHog 追踪：搜索查询
-    if (newFilters.q !== filters.q && newFilters.q) {
+    if (newFilters.q !== currentFilters.q && newFilters.q) {
       track(RETENTION_EVENTS.SEARCH_QUERY_SUBMITTED, {
         query: newFilters.q,
         category: 'news',
-        previous_query: filters.q || null,
+        previous_query: currentFilters.q || null,
       });
     }
 
     // 🎯 PostHog 追踪：排序变化
-    if (newFilters.sort !== filters.sort) {
+    if (newFilters.sort !== currentFilters.sort) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'sort',
         filter_value: newFilters.sort,
-        previous_value: filters.sort,
+        previous_value: currentFilters.sort,
       });
     }
 
     // 🎯 PostHog 追踪：重要性筛选
-    if (newFilters.importance !== filters.importance) {
+    if (newFilters.importance !== currentFilters.importance) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'importance',
         filter_value: newFilters.importance,
-        previous_value: filters.importance,
+        previous_value: currentFilters.importance,
       });
     }
 
     // 🎯 PostHog 追踪：时间范围筛选
-    if (newFilters.date_range !== filters.date_range && newFilters.date_range) {
+    if (newFilters.date_range !== currentFilters.date_range && newFilters.date_range) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'date_range',
         filter_value: newFilters.date_range,
-        previous_value: filters.date_range || null,
+        previous_value: currentFilters.date_range || null,
       });
     }
 
     // 🎯 PostHog 追踪：行业筛选
-    if (newFilters.industry_code !== filters.industry_code && newFilters.industry_code) {
+    if (newFilters.industry_code !== currentFilters.industry_code && newFilters.industry_code) {
       track(RETENTION_EVENTS.SEARCH_FILTER_APPLIED, {
         filter_type: 'industry',
         filter_value: newFilters.industry_code,
-        previous_value: filters.industry_code || null,
+        previous_value: currentFilters.industry_code || null,
       });
     }
 
     setFilters(newFilters);
     logger.debug('useEventFilters', '✅ setFilters 已调用 (React异步更新中...)');
-  }, [filters, track]);
+  }, [track]);  // ✅ 只依赖 track，不依赖 filters
 
   // 处理分页变化
   const handlePageChange = useCallback((page) => {
+    // 🔧 从 ref 读取最新的 filters
+    const currentFilters = filtersRef.current;
+
     // 🎯 PostHog 追踪：翻页
     track(RETENTION_EVENTS.NEWS_LIST_VIEWED, {
       page,
       filters: {
-        sort: filters.sort,
-        importance: filters.importance,
-        has_query: !!filters.q,
+        sort: currentFilters.sort,
+        importance: currentFilters.importance,
+        has_query: !!currentFilters.q,
       },
     });
 
     // 保持现有筛选条件，只更新页码
-    updateFilters({ ...filters, page });
-  }, [filters, updateFilters, track]);
+    updateFilters({ ...currentFilters, page });
+  }, [updateFilters, track]);  // ✅ 移除 filters 依赖
 
   // 处理事件点击
   const handleEventClick = useCallback((event) => {