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 值变为真，尽管我在调整大小方法中进行了检查并注意到当我开始缩小屏幕时侧边栏消失了它看起来像这样

Answer 1

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

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)
    }
}

Answer 2

尝试使用 useLayoutEffect 在实际渲染到屏幕之前推送一些状态更改。

useLayoutEffect(() => {
  if (window.innerWidth < 765) {
    setSideBarOpen(false);
    setSideBarButtonContainer(true);
  }  
  window.addEventListener("resize", resize);
}, [])

React Hooks + Media Query 页面刷新问题

React Hooks + Media Query page refresh issue

javascript

media-queries

reactjs

react-hooks