尽管反应状态发生了变化，CSS样式也不会发生变化

Question

我创建了const 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>
    )
}