EventEmitter在线状态更新异常：状态判断引发离线转在线失效求助

问题描述 #

我用一个EventEmitter监听服务器通信状态，通信中断/恢复时会触发isOnline的true或false状态。为了避免当前状态和传入状态一致时触发无意义的dispatch，我加了if判断语句，但现在出现异常：从在线切离线正常，仅从离线切回在线时，这个判断会阻止dispatch执行。删掉判断语句后功能恢复正常，但会产生冗余dispatch，导致不必要的重渲染。

相关代码 #

状态更新函数 #

const setIsOnline = (isOnline: boolean) => {
  if (state.isOnline !== isOnline) {
    console.log('Online status changed from', state.isOnline, 'to', isOnline);
    dispatch({
      type: navigatorActions.SET_IS_ONLINE,
      payload: isOnline
    });
  }
};

Reducer代码 #

import {
  navigatorActions,
  NavigatorState
} from '@shared/utils/domains/context/types';

export const navigatorReducer = (state: NavigatorState, action: any) => {
  let updatedState = state;
  switch (action.type) {
    case navigatorActions.SET_BACK_PATH:
      updatedState = { ...state, backPath: action.payload };
      break;
    case navigatorActions.SET_LOGO_CLICKED:
      updatedState = { ...state, logoClicked: action.payload };
      break;
    case navigatorActions.SET_IS_ONLINE:
      console.log('reducer changing', state.isOnline, 'to', action.payload);
      updatedState = { ...state, isOnline: action.payload };
      break;
    default:
      return state;
  }
  return updatedState;
};

排查与解决思路 #

1. 先定位判断失效的根源 #

离线转在线时判断不生效，大概率是以下两种情况：

• 值类型不匹配：比如EventEmitter传入的isOnline是字符串（如"true"）而非布尔值，导致state.isOnline !== isOnline判断不成立；
• 状态同步延迟：组件内的state更新存在滞后，触发setIsOnline时state.isOnline还是旧的离线状态，和传入的在线值相等，跳过了dispatch。

可以先加日志验证：

const setIsOnline = (isOnline: boolean) => {
  // 新增日志检查值和类型
  console.log('当前状态值:', state.isOnline, '(类型:', typeof state.isOnline, ')');
  console.log('传入值:', isOnline, '(类型:', typeof isOnline, ')');
  
  if (state.isOnline !== isOnline) {
    // 原有逻辑
  }
};

2. 针对性修复判断逻辑 #

情况1：类型不匹配

统一将传入值转为标准布尔类型：

const setIsOnline = (isOnline: boolean) => {
  const normalizedIsOnline = Boolean(isOnline);
  if (state.isOnline !== normalizedIsOnline) {
    console.log('Online status changed from', state.isOnline, 'to', normalizedIsOnline);
    dispatch({
      type: navigatorActions.SET_IS_ONLINE,
      payload: normalizedIsOnline
    });
  }
};

情况2：状态同步延迟

改用useRef存储当前最新状态（ref更新同步，不受组件渲染周期影响）：

import { useRef, useEffect } from 'react';

// 在组件内定义ref
const currentIsOnline = useRef(state.isOnline);

// 同步ref与state更新
useEffect(() => {
  currentIsOnline.current = state.isOnline;
}, [state.isOnline]);

// 修改状态更新函数
const setIsOnline = (isOnline: boolean) => {
  const normalizedIsOnline = Boolean(isOnline);
  if (currentIsOnline.current !== normalizedIsOnline) {
    currentIsOnline.current = normalizedIsOnline; // 先更新ref
    dispatch({
      type: navigatorActions.SET_IS_ONLINE,
      payload: normalizedIsOnline
    });
  }
};

3. 兜底优化：减少冗余渲染 #

如果暂时不想修改判断逻辑，也可以在使用该状态的组件上用React.memo包裹，或者用useMemo/useCallback缓存组件内的计算结果，过滤不必要的重渲染。

内容的提问来源于stack exchange，提问作者rockets4all