React应用判断桌面/移动端状态失效，如何修复？

你的代码有两个关键问题导致mobile状态始终为false：

1. 初始状态未正确初始化：页面刷新时，mobile直接设为false，没有根据当前窗口宽度判断
2. 异步状态更新的闭包陷阱：handleWindowSizeChange里调用setWidth后立刻用width判断，但React的state更新是异步的，此时width还是旧值，判断逻辑完全失效

修复方案（精简版） #

直接去掉冗余的width状态，用window.innerWidth实时判断，同时初始化时就设置正确的mobile值：

import { useState, useEffect } from 'react';

const YourComponent = () => {
    // 初始时根据窗口宽度直接设置mobile状态
    const [mobile, setMobile] = useState(window.innerWidth <= 500);

    const handleWindowSizeChange = () => {
        // 直接读取当前窗口宽度更新状态
        setMobile(window.innerWidth <= 500);
    };

    useEffect(() => {
        window.addEventListener('resize', handleWindowSizeChange);
        // 组件卸载时移除监听，避免内存泄漏
        return () => window.removeEventListener('resize', handleWindowSizeChange);
    }, []);

    console.log('mobile:', mobile);

    return <div>{mobile ? '移动端视图' : '桌面端视图'}</div>;
};

export default YourComponent;

如果需要保留width状态的修复方案 #

如果你确实需要记录窗口宽度值，可通过临时变量存储最新宽度，避免异步state的问题：

import { useState, useEffect } from 'react';

const YourComponent = () => {
    const [width, setWidth] = useState(window.innerWidth);
    const [mobile, setMobile] = useState(window.innerWidth <= 500);

    const handleWindowSizeChange = () => {
        const currentWidth = window.innerWidth;
        setWidth(currentWidth);
        // 用临时变量判断，而非未更新的state
        setMobile(currentWidth <= 500);
    };

    useEffect(() => {
        window.addEventListener('resize', handleWindowSizeChange);
        return () => window.removeEventListener('resize', handleWindowSizeChange);
    }, []);

    console.log('width:', width, 'mobile:', mobile);

    return <div>{mobile ? '移动端视图' : '桌面端视图'}</div>;
};

export default YourComponent;

额外优化建议 #

• 可以给resize事件添加防抖处理，避免窗口拖动时频繁触发状态更新：

const handleWindowSizeChange = () => {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(() => {
        setMobile(window.innerWidth <= 500);
    }, 100);
};

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