javascript - React Hooks + Media Query 页面刷新问题

Question

我创建了一个响应式侧边栏，逻辑实现如下，当屏幕低于 765 像素时，侧边栏自动隐藏，但问题是当我刷新低于 765 像素的页面时，侧边栏显示如下

我的代码看起来像这样

function SideBar(props) {
    const {someValue} = useContext(SideBarContext);
    const {SideBarValue, SideBarWallpaperValue} = React.useContext(CounterContext);

    const [SideBarThemeValue] = SideBarValue;
    const [SideBarBackgroundValue] = SideBarWallpaperValue;

    const [sideBarOpen, setSideBarOpen] = useState(true);
    const [SideBarButtonContainer, setSideBarButtonContainer] = useState(false);

    useEffect(() => {
        window.addEventListener("resize", resize);
    })

    const resize = () => {
        if(window.innerWidth < 765) {
            setSideBarOpen(false)
            setSideBarButtonContainer(true)
        } else {
            setSideBarOpen(true)
            setSideBarButtonContainer(false)
        }
    }
    

    const showSideBar = () => {
        setSideBarOpen(!sideBarOpen)
    }

    return (
        <>
            {
                SideBarButtonContainer ? <div className={"showSideBarButtonContainer"}>
                    <img className={"showSideBarButton"} onClick={() => showSideBar()} src={SideBarMenuIcon} alt={"Open"} />
                </div> : null
            }
            <Menu isOpen={sideBarOpen}>
                
            </Menu>
        </>
    );
}

我假设当我刷新页面时，该sideBarOpen值变为 true，尽管我在 resize 方法中进行了检查，并注意到当我开始缩小屏幕时，侧边栏消失了，看起来像这样

标签： javascriptreactjsreact-hooksmedia-queries

Answer 1

侧边栏的默认状态是打开，但是您必须根据宽度计算初始状态。此外，您必须仅在初始渲染时调整窗口大小时初始化侦听器。

const [sideBarOpen, setSideBarOpen] = useState(() => window.innerWidth > 765);
const [SideBarButtonContainer, setSideBarButtonContainer] = useState(() => window.innerWidth < 765);

useEffect(() => {
    window.addEventListener("resize", resize);
}, []); // Only initialize listener on initial render

const resize = () => {
    if(window.innerWidth < 765) {
        setSideBarOpen(false)
        setSideBarButtonContainer(true)
    } else {
        setSideBarOpen(true)
        setSideBarButtonContainer(false)
    }
}