useState钩子不能使用usePrevious钩子

Question

我已经创建了一个菜单组件，我正在尝试使用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 if语句在每次重新渲染时都为TRUE，因为调用setSubMenusOpen似乎不会导致usePrevious再次存储新值。 这就是我认为正在发生的事情。

• props.isOpen从TRUE> FALSE更改
• prevIsOpen和props.isOpen此时为TRUE和FALSE，所以...
• 调用setSubMenusOpen（）会导致重新渲染。
• 而不是previsOpen和props.isOpen现在为FALSE和FALSE，它们保持不变，因此再次调用setSubMenusOpen，ad finitum

任何帮助将不胜感激。

Answer 1

问题是你直接在渲染中设置状态，这导致设置状态和重新渲染的无限循环。 而是使用useEffect钩子并仅在isOpen prop更改时执行它

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