如何避免从事件监听器(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);
}

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

这个逻辑是关闭移动导航覆盖一旦窗口调整大小和桌面导航显示。

感谢

Answer 1

试试这个

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

这将更新，基于依赖(isOpen)得到更改。