javascript - 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

問題は、これが無限ループ エラーを引き起こし、継続的にメニューを再レンダリングすることです。

これは、setSubMenusOpen を呼び出しても usePrevious が新しい値を再度格納しないように見えるため、再レンダリングのたびに if ステートメントが TRUE の場合に発生するようです。これが起こっていると思います。

• props.isOpen は TRUE > FALSE から変更されます
• prevIsOpen と props.isOpen は、この時点で TRUE と FALSE であるため、...
• setSubMenusOpen() が呼び出され、再レンダリングが発生します。
• previsOpen と props.isOpen が FALSE と FALSE になるのではなく、変更されないままであるため、setSubMenusOpen が再度呼び出されます。

どんな助けでも大歓迎です。