useState 挂钩不适用于 usePrevious 挂钩
useState hook not working with usePrevious hook
我已经创建了一个菜单组件,并且正在尝试使用 useState 挂钩来存储打开了哪些子菜单。当菜单关闭时(从父级使用道具)我想关闭所有子菜单并执行此操作我使用 react-hanger 库中的 usePrevious 挂钩来确定主菜单何时从 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 再次存储新值。这就是我认为正在发生的事情。
- props.isOpen 从 TRUE > FALSE
变化
- prevIsOpen 和 props.isOpen 在这一点上是 TRUE 和 FALSE,所以...
- setSubMenusOpen() 被调用导致重新渲染。
- 而不是 previsOpen 和 props.isOpen 现在是 FALSE 和 FALSE,它们保持不变,所以 setSubMenusOpen 被再次调用,无限期
如有任何帮助,我们将不胜感激。
问题是您直接在渲染中设置状态,这导致设置状态和重新渲染的无限循环。而是使用 useEffect
钩子并仅在 isOpen
prop change
上执行它
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
我已经创建了一个菜单组件,并且正在尝试使用 useState 挂钩来存储打开了哪些子菜单。当菜单关闭时(从父级使用道具)我想关闭所有子菜单并执行此操作我使用 react-hanger 库中的 usePrevious 挂钩来确定主菜单何时从 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 再次存储新值。这就是我认为正在发生的事情。
- props.isOpen 从 TRUE > FALSE 变化
- prevIsOpen 和 props.isOpen 在这一点上是 TRUE 和 FALSE,所以...
- setSubMenusOpen() 被调用导致重新渲染。
- 而不是 previsOpen 和 props.isOpen 现在是 FALSE 和 FALSE,它们保持不变,所以 setSubMenusOpen 被再次调用,无限期
如有任何帮助,我们将不胜感激。
问题是您直接在渲染中设置状态,这导致设置状态和重新渲染的无限循环。而是使用 useEffect
钩子并仅在 isOpen
prop change
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