如何避免从事件监听器重新渲染无限循环（React）

Question

我有以下功能组件：

export default function Nav({photo}) {
    const [isOpen, setIsOpen] = useState(false)

    const [width, setWidth] = useState(window.innerWidth);
    const breakpoint = 768;

    useEffect(() => {
        const handleWindowResize = () => setWidth(window.innerWidth)
        window.addEventListener("resize", handleWindowResize);

        return () => window.removeEventListener("resize", handleWindowResize);
    }, []);

    if(width >= breakpoint) {
        setIsOpen(false);
    }

    function toggleMenu() {
        setIsOpen(!isOpen);
        if(!isOpen) {
            disableBodyScroll(document.body);
        } else {
            enableBodyScroll(document.body);
        }
        return true;
    }
    return (
<> </>
)}

问题是，

    if(width >= breakpoint) {
        setIsOpen(false);
    }

导致无限循环。 我正在研究并没有找到适用于这种情况的解决方案。 我不能将此部分放入 function 中，因为我总是需要检查调整大小，而不仅仅是在单击按钮之后。 当点击移动导航图标时调用 toggleMenu。

一旦 window 调整大小并显示桌面导航，此逻辑将关闭移动导航覆盖。

谢谢

Answer 1

尝试这个

useEffect(() => {
 if(width >= breakpoint) {
     setIsOpen(false);
 }
},[isOpen])

这将根据依赖项（isOpen）的变化进行更新。