如何将窗口调整大小事件侦听器值设置为 React State？

Question

这个问题很简单但是我可能忽略了很少一点。 PostLayout 组件正在监听窗口屏幕大小。当窗口宽度小于 768px 时，我预计 isDesktopSize 为 false。我尝试了所有方法，例如在setIsDesktopSize 中使用箭头函数、在 true 或 false 中使用文本作为状态值、使用回调方法等……但它不起作用。

PostLayout 分享如下：

import React, {useState,useEffect, useCallback} from 'react'
import LeftSideNavbar from './LeftSideNavbar'
import TopNavbar from './TopNavbar'

export default function PostLayout({children}) {
    const [isDesktopSize, setIsDesktopSize] = useState(true)

    let autoResize = () => {
        console.log("Desktop: " + isDesktopSize);
        console.log(window.innerWidth);
        if(window.innerWidth < 768 ){
            setIsDesktopSize(false)
        }else{
            setIsDesktopSize(true)
        }
    }

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

    return (
        <>
            <TopNavbar isDesktopSize={isDesktopSize}/>
            <main>
                <LeftSideNavbar/>
                {children}
            </main>
        </>  
    )
}

控制台日志共享如下：

Desktop: true
627

Answer 1

这可能会被提取到自定义挂钩中。您想解决一些问题：

1. 现在您默认状态为true，但是当组件加载时，这可能不正确。这可能是您在第一次执行效果时看到不正确的控制台日志的原因。准确计算初始状态可以为您节省一些卡顿/双重渲染。
2. 当组件卸载时，您没有断开调整大小侦听器的连接，这可能会导致在组件卸载后尝试设置组件状态时出错。

以下是解决这些问题的自定义挂钩示例：

function testIsDesktop() {
    if (typeof window === 'undefined') {
        return true;
    }
    return window.innerWidth >= 768;
}

function useIsDesktopSize() {
    // Initialize the desktop size to an accurate value on initial state set
    const [isDesktopSize, setIsDesktopSize] = useState(testIsDesktop);

    useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }

        function autoResize() {
            setIsDesktopSize(testIsDesktop());
        }

        window.addEventListener('resize', autoResize);

        // This is likely unnecessary, as the initial state should capture
        // the size, however if a resize occurs between initial state set by
        // React and before the event listener is attached, this
        // will just make sure it captures that.
        autoResize();

        // Return a function to disconnect the event listener
        return () => window.removeEventListener('resize', autoResize);
    }, [])

    return isDesktopSize;
}

然后要使用它，您的其他组件将如下所示（假设您的自定义钩子就在同一个文件中 - 尽管将其提取到单独的文件并导入它可能很有用）：

import React, { useState } from 'react'
import LeftSideNavbar from './LeftSideNavbar'
import TopNavbar from './TopNavbar'

export default function PostLayout({children}) {
    const isDesktopSize = useIsDesktopSize();

    return (
        <>
            <TopNavbar isDesktopSize={isDesktopSize}/>
            <main>
                <LeftSideNavbar/>
                {children}
            </main>
        </>  
    )
}

编辑：我对此稍作修改，因此理论上它应该与服务器端渲染器一起使用，该渲染器将假定桌面大小。

Answer 2

试试这个，你将 isDesktopSizze 设置为 'mobile'，即 === true

const [isDesktopSize, setIsDesktopSize] = useState(true)

let autoResize = () => {
        console.log("Desktop: " + isDesktopSize);
        console.log(window.innerWidth);
        if(window.innerWidth < 768 ){
            setIsDesktopSize(true)
        }else{
            setIsDesktopSize(false)
        }
    }