我已经创建了一个菜单组件,并且试图使用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重新存储新值。我认为这是正在发生的事情。
  • props.isOpen从TRUE> FALSE
  • 更改
  • prevIsOpen和props.isOpen在这一点上是TRUE和FALSE,所以...
  • 调用
  • setSubMenusOpen()会导致重新渲染。
  • 而不是previsOpen和props.isOpen现在为FALSE和FALSE,它们保持不变,因此setSubMenusOpen被再次调用,名称为

  • 任何帮助将不胜感激。

    最佳答案

    问题是您直接在渲染中设置状态,这会导致设置状态和重新渲染的无限循环。而是使用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/

    10-09 00:09