Javascript CSS样式don'；尽管反应状态发生变化，但仍不能改变

我已经创建了常量isTransitionEnabled和isMenuToggled状态。当按下按钮时，isMenuToggled设置为true，并且样式更改。isTransitionEnabled默认为false，并在设置isMenuToggled之前设置为true，一旦isMenuToggled操作完成，isTransitionEnabled将再次设置为false。目的是防止因窗口大小或方向变化等原因重新招标时发生过渡

我尝试编写一些异步javascript代码。但是，尽管状态已更改，但对样式没有影响，并且无论isTransitionEnabled如何，转换都将被禁用。为什么?

以下是一些代码：

import React , { useState, useEffect } from 'react'
import { useMediaQuery } from 'react-responsive'
import './App.css'

import Header from './Header/Header'

export default function Home() {
    const isMobile = useMediaQuery({
        query: '(max-device-width: 1024px)'
    })

    const [isMenuToggled, SetIsMenuToggled] = useState(false)
    const [isTransitionEnabled, SetTransitionEnabled] = useState(false)




    const isMenuToggledReporter = async ()=> {

        const ToggleMenu = (TransitionState)=>{
            return new Promise((resolve, reject)=>{
                //console.log(TransitionState)
                SetIsMenuToggled(!isMenuToggled)
                resolve(TransitionState)
            })
        }

        const ChangeTransitionState = (TransitionState)=>{
            return new Promise((resolve, reject)=>{
                SetTransitionEnabled(!TransitionState)
                //console.log(TransitionState)
                resolve(!TransitionState)
            })
        }

        //ChangeTransitionState(isTransitionEnabled)
        //.then((TransitionState)=>{

            //return ToggleMenu(TransitionState)})
        //.then((TransitionState)=>{

            //ChangeTransitionState(TransitionState)
        //})

        const promise1 = await ChangeTransitionState(false)

        const promise2 = await ToggleMenu(promise1)

        const promise3 = await ChangeTransitionState(promise2)

        console.log(`promise 1 is ${promise1}`)
        console.log(`promise 2 is ${promise2}`)
        console.log(`promise 3 is ${promise3}`)

        //SetIsMenuToggled(!isMenuToggled)

        //SetTransitionEnabled(true)
    }

    //Use observer pattern for main div

    //If toggle, the menu is open, disable transition
    return (
        <div style={{
        }}>
            <div style={{
                position: 'absolute',
                right: isMenuToggled?'40vw':'0',
                height: '100vh',
                width: '100vw',
                display: 'grid',
                gridTemplateRows: 'repeat(20, 5vmax)',
                transition: isTransitionEnabled?'right 1s':'none'
            }}>
                <Header isMobile={isMobile} isMenuToggledReporter={isMenuToggledReporter} isTransitionEnabled={isTransitionEnabled}/>            
            </div>
            <div style={isMobile?{
                position: 'absolute',
                background: '#008b8b',
                left: isMenuToggled?'60vw':'100vw',
                height: '100vmax',
                width: '40vw',
                transition: isTransitionEnabled?'left 1s':'none',
            }:{
                display: 'none',
            }}>

            </div>
        </div>
    )
}

从“React”导入React，{useState，useEffect}
从“react responsive”导入{useMediaQuery}
导入“./App.css”
从“./Header/Header”导入标题
导出默认函数Home（）{
const isMobile=useMediaQuery({
查询：'（最大设备宽度：1024px）'
})
常量[isMenuToggled，SetIsMenuToggled]=useState（false）
常量[isTransitionEnabled，SetTransitionEnabled]=useState（false）
常量isMenuToggledReporter=async（）=>{
常量切换菜单=（转换状态）=>{
返回新承诺（（解决、拒绝）=>{
//console.log（TransitionState）
SetIsMenuToggled（！isMenuToggled）
解析（转换状态）
})
}
常量ChangeTransitionState=（TransitionState）=>{
返回新承诺（（解决、拒绝）=>{
SetTransitionEnabled（！TransitionState）
//console.log（TransitionState）
解析（！TransitionState）
})
}
//ChangeTransitionState（isTransitionEnabled）
//.然后（（转换状态）=>{
//返回切换菜单（转换状态）}）
//.然后（（转换状态）=>{
//变更转换状态（转换状态）
//})
const promise1=等待更改转换状态（false）
const promise2=等待切换菜单（promise1）
const promise3=等待变更转换状态（promise2）
log（`promise1是${promise1}`）
log（`promise2是${promise2}`）
log（`promise3是${promise3}`）
//SetIsMenuToggled（！isMenuToggled）
//SetTransitionEnabled（真）
}
//对主div使用观察者模式
//如果切换，菜单处于打开状态，请禁用转换
返回(
)
}