diff --git a/src/hooks/useEventNotifications.js b/src/hooks/useEventNotifications.js index 876c27c9..e23de785 100644 --- a/src/hooks/useEventNotifications.js +++ b/src/hooks/useEventNotifications.js @@ -37,28 +37,46 @@ export const useEventNotifications = (options = {}) => { const [error, setError] = useState(null); const unsubscribeRef = useRef(null); + // 使用 ref 存储 onNewEvent 回调,避免因回调函数引用改变导致重新连接 + const onNewEventRef = useRef(onNewEvent); + + // 每次 onNewEvent 改变时更新 ref useEffect(() => { + onNewEventRef.current = onNewEvent; + }, [onNewEvent]); + + useEffect(() => { + console.log('[useEventNotifications DEBUG] ========== useEffect 执行 =========='); + console.log('[useEventNotifications DEBUG] enabled:', enabled); + console.log('[useEventNotifications DEBUG] eventType:', eventType); + console.log('[useEventNotifications DEBUG] importance:', importance); + // 如果禁用,则不订阅 if (!enabled) { + console.log('[useEventNotifications DEBUG] ⚠️ 订阅已禁用,跳过'); return; } // 连接状态监听 const handleConnect = () => { + console.log('[useEventNotifications DEBUG] ✓ WebSocket 已连接'); setIsConnected(true); setError(null); }; const handleDisconnect = () => { + console.log('[useEventNotifications DEBUG] ⚠️ WebSocket 已断开'); setIsConnected(false); }; const handleConnectError = (err) => { + console.error('[useEventNotifications ERROR] WebSocket 连接错误:', err); setError(err); setIsConnected(false); }; // 连接 WebSocket + console.log('[useEventNotifications DEBUG] 准备连接 WebSocket...'); socketService.connect(); // 监听连接事件 @@ -66,7 +84,7 @@ export const useEventNotifications = (options = {}) => { socketService.on('disconnect', handleDisconnect); socketService.on('connect_error', handleConnectError); - // 新事件处理函数 + // 新事件处理函数 - 使用 ref 中的回调 const handleNewEvent = (eventData) => { console.log('\n[useEventNotifications DEBUG] ========== Hook 收到新事件 =========='); console.log('[useEventNotifications DEBUG] 事件数据:', eventData); @@ -77,10 +95,10 @@ export const useEventNotifications = (options = {}) => { setNewEvent(eventData); console.log('[useEventNotifications DEBUG] ✓ newEvent 状态已更新'); - // 调用外部回调 - if (onNewEvent) { + // 调用外部回调(从 ref 中获取最新的回调) + if (onNewEventRef.current) { console.log('[useEventNotifications DEBUG] 准备调用外部 onNewEvent 回调'); - onNewEvent(eventData); + onNewEventRef.current(eventData); console.log('[useEventNotifications DEBUG] ✓ 外部 onNewEvent 回调已调用'); } else { console.log('[useEventNotifications DEBUG] ⚠️ 没有外部 onNewEvent 回调'); @@ -114,22 +132,27 @@ export const useEventNotifications = (options = {}) => { // 组件卸载时清理 return () => { - console.log('清理 WebSocket 订阅'); + console.log('\n[useEventNotifications DEBUG] ========== 清理 WebSocket 订阅 =========='); // 取消订阅 if (unsubscribeRef.current) { + console.log('[useEventNotifications DEBUG] 取消订阅...'); unsubscribeRef.current(); } // 移除监听器 + console.log('[useEventNotifications DEBUG] 移除事件监听器...'); socketService.off('connect', handleConnect); socketService.off('disconnect', handleDisconnect); socketService.off('connect_error', handleConnectError); // 断开连接 + console.log('[useEventNotifications DEBUG] 断开 WebSocket 连接...'); socketService.disconnect(); + + console.log('[useEventNotifications DEBUG] ========== 清理完成 ==========\n'); }; - }, [eventType, importance, enabled, onNewEvent]); + }, [eventType, importance, enabled]); // 移除 onNewEvent 依赖 return { newEvent, // 最新收到的事件 diff --git a/src/views/Community/components/EventList.js b/src/views/Community/components/EventList.js index 28c8a1fa..7e7f7a77 100644 --- a/src/views/Community/components/EventList.js +++ b/src/views/Community/components/EventList.js @@ -187,17 +187,17 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai logger.info('EventList', '收到新事件推送', event); console.log('[EventList DEBUG] 准备显示 Toast 通知'); - // 显示 Toast 通知 - toast({ - title: '新事件发布', + // 显示 Toast 通知 - 更明显的配置 + const toastId = toast({ + title: '🔔 新事件发布', description: event.title, - status: 'info', - duration: 5000, + status: 'success', // 改为 success,更醒目 + duration: 8000, // 延长显示时间到 8 秒 isClosable: true, - position: 'top-right', - variant: 'left-accent', + position: 'top', // 改为顶部居中,更显眼 + variant: 'solid', // 改为 solid,背景更明显 }); - console.log('[EventList DEBUG] ✓ Toast 通知已显示'); + console.log('[EventList DEBUG] ✓ Toast 通知已调用,ID:', toastId); console.log('[EventList DEBUG] 准备更新事件列表'); // 将新事件添加到列表顶部(防止重复)