如何将窗口调整大小事件监听器的值设置为React状态？

Question

如何将窗口调整大小事件监听器的值设置为React状态？

3

这个问题很简单，但我可能忽略了一些小细节。窗口屏幕大小由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

- swim

3个回答

0

我在npm上没有找到这样的包，所以我想创建一个：https://www.npmjs.com/package/use-device-detect。我认为它会对某些人有所帮助 :)

- Paweł Wojtasiński

0

Try this, you are setting isDesktopSizze to 'mobile', which is === 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)
        }
    }

- lele

谢谢您的快速回复，但我已经更新了我的问题并更改了这些行。您可以删除答案，但还是非常感谢您的帮助。 - swim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Baumbach · Accepted Answer

这可能可以被提取为一个自定义的钩子。你需要解决以下几个问题：

现在你默认将状态设置为true，但是当组件加载时，这可能是不正确的。这可能是为什么你在第一次执行effect时看到了错误的console log。计算初始状态以确保准确性可以避免一些瑕疵/双重渲染。
当组件卸载时，你没有断开调整大小监听器，这可能会导致在组件卸载后尝试设置状态时出错。

这是一个解决以上问题的自定义钩子示例：

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

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

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

编辑：我稍微修改了一下，这样它理论上可以在服务器端呈现器上运行，假设是桌面尺寸。