我已经创建了一个菜单组件,并且试图使用useState钩子(Hook)来存储打开的子菜单。当菜单关闭时(从父级使用props),我想关闭所有子菜单,然后使用react-hanger库中的usePrevious钩子(Hook)来确定主菜单何时从OPEN> CLOSED进入。这是我的代码。
import React, { useState } from 'react';
import { usePrevious } from "react-hanger"
const defaultMenusOpen = {menu1:false, menu2:false}
function Menu(props) {
const [subMenusOpen, setSubMenusOpen] = useState(defaultMenusOpen))
const prevIsOpen = usePrevious(props.isOpen);
if(props.isOpen === false && prevIsOpen === true){
setSubMenusOpen(defaultMenusOpen)
}
return (
{props.isOpen &&
... JSX
}
);
}
export default Menu
问题在于,这将导致无限循环错误,并不断重新呈现菜单。
这似乎是因为他的if语句在每次重新渲染时都为TRUE,因为调用setSubMenusOpen似乎并不会导致usePrevious重新存储新值。我认为这是正在发生的事情。
任何帮助将不胜感激。
最佳答案
问题是您直接在渲染中设置状态,这会导致设置状态和重新渲染的无限循环。而是使用useEffect
钩子(Hook),仅在isOpen
属性更改时执行它
function Menu(props) {
const [subMenusOpen, setSubMenusOpen] = useState(defaultMenusOpen))
const prevIsOpen = usePrevious(props.isOpen);
useEffect(() => {
if(props.isOpen === false && prevIsOpen === true){
setSubMenusOpen(defaultMenusOpen)
}
}, [props.isOpen])
return (
{props.isOpen &&
... JSX
}
);
}
export default Menu
关于javascript - useState钩子(Hook)不适用于usePrevious h,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53730721/