From e6c422887c5f1940e386edf0844c7af6da878e11 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 5 Nov 2025 08:11:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BD=BF=E7=94=A8=20ref=20=E9=81=BF?= =?UTF-8?q?=E5=85=8D=20filters=20=E4=BE=9D=E8=B5=96=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E5=9B=9E=E8=B0=83=E9=87=8D=E6=96=B0=E5=88=9B=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Community/hooks/useEventFilters.js | 48 ++++++++++++-------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/src/views/Community/hooks/useEventFilters.js b/src/views/Community/hooks/useEventFilters.js index aec3fdd8..7bd6ea95 100644 --- a/src/views/Community/hooks/useEventFilters.js +++ b/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) => {