断网时隐藏Ant Design Modal的实现方案求助

原写法的问题 #

• connected() 是异步函数，直接在 visible 中调用会返回 Promise 对象，而 visible 要求布尔值，会导致 Modal 状态异常。
• 组件每次渲染都会触发 connected()，频繁发起 /connection 请求，造成不必要的资源消耗。

正确实现方案 #

需要用状态管理在线状态，结合 useEffect 异步更新状态，避免直接在 JSX 中调用异步函数。

步骤1：修正辅助函数的笔误 #

原函数里的 online.status 是笔误，改为 on.status：

export const connected = async () => {
    try {
        const on = await fetch('/connection');
        return on.status >= 200 && on.status < 300;
    } catch (err) {
        return false;
    }
};

步骤2：组件内的完整实现 #

import { useState, useEffect } from 'react';
import { Modal } from 'antd';
import { connected } from './your-path'; // 根据实际路径导入

const YourComponent = () => {
    const [isVisible, setIsVisible] = useState(false); // 控制Modal基础显示状态
    const [isOnline, setIsOnline] = useState(true); // 存储在线状态

    // 初始化检测+定时轮询在线状态
    useEffect(() => {
        const checkConnection = async () => {
            const status = await connected();
            setIsOnline(status);
        };

        // 立即执行一次检测
        checkConnection();

        // 定时轮询，每5秒检测一次，可按需调整间隔
        const interval = setInterval(checkConnection, 5000);

        // 组件卸载时清理定时器
        return () => clearInterval(interval);
    }, []);

    const closeModal = () => {
        setIsVisible(false);
    };

    // 示例：打开Modal的触发函数，根据业务逻辑调用
    const openModal = () => {
        setIsVisible(true);
    };

    return (
        <>
            <button onClick={openModal}>打开弹窗</button>

            <Modal
                visible={isOnline && isVisible}
                closable={true}
                onCancel={closeModal}
                width={400}
            >
                <p>test</p>
            </Modal>
        </>
    );
};

export default YourComponent;

补充优化 #

可以结合浏览器原生 navigator.onLine API 做快速预判断，再用后端接口做精确验证，减少不必要的请求：

const checkConnection = async () => {
    // 浏览器API快速判断离线状态
    if (!navigator.onLine) {
        setIsOnline(false);
        return;
    }
    // 后端接口精确验证在线状态
    const status = await connected();
    setIsOnline(status);
};

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