React实现汉堡菜单时条件切换仅生效一次的问题如何解决？

问题根因 #

你代码中定义的useHamburger是普通局部变量，而非React的响应式状态：

• 每次调用setNavbarStyle修改样式后，都会触发Navbar组件重新渲染
• 组件重渲染时所有局部变量会被重新初始化，useHamburger每次都会被重置为false，因此第二次及之后的点击永远只会执行切换到navbarfinal的逻辑，不会触发样式回退。

修复方案 #

把useHamburger改为useState管理的响应式状态即可，还可以进一步简化逻辑，不需要单独维护样式状态，直接根据菜单开关状态动态生成样式即可，修改后的参考代码如下：

import { useState } from 'react'
const Navbar = ({ img }) => {
  // 用state管理汉堡菜单开关状态
  const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);

  // 动态计算导航栏样式
  const navbarStyle = {
    listStyle: 'none',
    display: 'flex',
    justifyContent: 'space-around',
    flexDirection: isHamburgerOpen ? 'column' : 'row',
    width: '30%',
    color: 'var(--GrayishViolet)',
    // 汉堡菜单打开时追加背景色
    ...(isHamburgerOpen && { backgroundColor: 'red' })
  }

  const TurnToHamburger = () => {
    // 直接切换开关状态即可，样式会自动同步更新
    setIsHamburgerOpen(prev => !prev)
  }

  // 此处保留你原有的组件返回渲染逻辑，将点击事件绑定到TurnToHamburger即可
}

如果你想保留原先分开定义两份样式对象的写法，也可以直接基于开关状态判断使用对应样式：

// 保留你原先的navbarinitial、navbarfinal定义
const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);

const TurnToHamburger = () => {
  setIsHamburgerOpen(prev => !prev)
}

// 渲染导航栏时直接传入样式：style={isHamburgerOpen ? navbarfinal : navbarinitial}

内容的提问来源于stack exchange，提问作者Kevin H