React应用网络变化触发注销异常问题求助

你的代码存在几个核心问题导致意外注销：

1. 网络状态判断逻辑倒置：当前代码在downlink > 0（网络正常）时触发注销，完全和需求相反
2. 缺少初始状态校验：组件挂载时未记录初始网络状态，若初始状态符合错误的判断条件会直接触发注销
3. 事件监听重复绑定：handleLogout每次渲染都会生成新函数，导致useEffect重复执行，可能重复绑定change事件
4. 未区分真实网络变更：仅监听connection的change事件，但未校验状态是否发生了符合预期的变更（如从在线到离线、网络类型切换）

1. 修正网络状态判断逻辑，结合navigator.onLine #

使用navigator.onLine判断在线状态，配合navigator.connection的细节变化，确保只在网络断开或切换时触发注销。

2. 记录初始网络状态，避免初始化触发 #

在组件挂载时保存初始的网络状态，后续仅当状态发生真实变更时才执行注销逻辑。

3. 稳定handleLogout引用，避免重复绑定事件 #

在useLogout钩子中用useCallback包裹handleLogout，确保其引用稳定，防止useEffect重复执行。

4. 优化事件监听逻辑，增加状态对比 #

在handleNetworkChange中对比当前状态与之前的状态，只有当状态发生符合需求的变化时才触发注销。

修改后的代码 #

首先修改useLogout钩子，稳定handleLogout引用 #

import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import useNavigatetoRoot from './useNavigatetoRoot';
import usePostDataToServer from './usePostDataToServer';
import { BASE_URL, ENDPOINTS } from './constants';

const useLogout = () => {
    const dispatch = useDispatch();
    const handleNavigateToRoot = useNavigatetoRoot();

    const onSuccessfullLogout = useCallback((response) => {
        handleNavigateToRoot();
    }, [handleNavigateToRoot]);

    const { mutate } = usePostDataToServer({
        onPostReqSuccess: onSuccessfullLogout,
        dispatch,
    });

    // 使用useCallback稳定handleLogout引用
    const handleLogout = useCallback(() => {
        const API_URL = `${BASE_URL}${ENDPOINTS.LOGOUT}`;
        mutate({ API_URL, dispatch });
    }, [mutate, dispatch]);

    return { handleLogout };
};

export default useLogout;

然后修改App.jsx中的网络监听逻辑 #

import { useEffect, useRef } from 'react';
import { useLogout } from './hooks/useLogout';

// ...其他代码

const { handleLogout } = useLogout();
const isUserAuthenticated = // 你的认证状态判断逻辑

const whenUserIsIdle = () => {
    if (isUserAuthenticated)
        handleLogout();
};

useIdleTimer({
    onIdle: whenUserIsIdle,
    timeout: 300000, //5 minutes
    throttle: 500, // checks after 500ms
});

useEffect(() => {
    // 用useRef保存初始状态，避免闭包问题
    const initialState = useRef({
        online: navigator.onLine,
        downlink: navigator.connection?.downlink,
        effectiveType: navigator.connection?.effectiveType
    });

    const handleNetworkChange = () => {
        const currentOnline = navigator.onLine;
        const currentConnection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
        const currentDownlink = currentConnection?.downlink;
        const currentEffectiveType = currentConnection?.effectiveType;

        // 未认证用户直接跳过
        if (!isUserAuthenticated) return;

        // 判断是否为真实网络变更：在线状态变化 或 网络参数显著变化
        const isRealChange = 
            currentOnline !== initialState.current.online ||
            currentDownlink !== initialState.current.downlink ||
            currentEffectiveType !== initialState.current.effectiveType;

        if (!isRealChange) return;

        // 按需调整注销条件：示例为网络断开时注销
        if (!currentOnline) {
            console.log('网络断开，执行注销');
            handleLogout();
        }
        // 若需要在网络类型切换时注销，可取消注释以下代码
        // else if (currentEffectiveType !== initialState.current.effectiveType) {
        //     console.log('网络类型切换，执行注销');
        //     handleLogout();
        // }

        // 更新初始状态，用于下次判断
        initialState.current = {
            online: currentOnline,
            downlink: currentDownlink,
            effectiveType: currentEffectiveType
        };
    };

    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    // 同时监听online/offline事件，覆盖基础在线状态变化
    window.addEventListener('online', handleNetworkChange);
    window.addEventListener('offline', handleNetworkChange);
    if (connection) {
        connection.addEventListener('change', handleNetworkChange);
    }

    return () => {
        window.removeEventListener('online', handleNetworkChange);
        window.removeEventListener('offline', handleNetworkChange);
        if (connection) {
            connection.removeEventListener('change', handleNetworkChange);
        }
    };
}, [handleLogout, isUserAuthenticated]);

• 结合online/offline事件：navigator.onLine能更直接判断在线状态，配合connection.change事件覆盖网络类型切换的场景
• 状态对比机制：通过useRef保存初始状态，确保只有当状态发生真实变化时才触发注销，避免初始化或重复事件触发
• 稳定函数引用：用useCallback包裹handleLogout，防止useEffect因依赖变化重复执行，避免重复绑定事件
• 按需调整注销条件：根据实际需求调整isRealChange和注销触发的条件，比如只在网络断开时注销，或网络类型切换时注销

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