React使用useContext实现Toggle导航栏按钮无响应该如何解决？

核心问题列表 #

• 问题1：未正确提供ToggleButton的Context Provider
  你目前在App.tsx中只挂载了AuthContext.Provider，ToggleButton的context没有对应的Provider包裹组件树，所有子组件消费ToggleButton时拿到的都是createContext时传入的默认值，其中toggleButton是空函数，触发后不会执行任何逻辑。
  修复方式：在App.tsx中用ToggleButton.Provider包裹组件树：

// App.tsx 修复示例
return (
  <AuthContext.Provider value={contextValue}>
    {/* 新增ToggleButton的Provider */}
    <ToggleButton.Provider value={{isPressed, toggleButton}}>
      <div className="App">
        <BrowserRouter forceRefresh={true}>
          {/* 原有路由逻辑保持不变 */}
        </BrowserRouter>
      </div>
    </ToggleButton.Provider>
  </AuthContext.Provider>
)

可选优化：如果你原本是打算将按钮切换状态整合到AuthContext中，就不需要单独创建ToggleButton context，直接将isPressed、toggleButton定义到AuthContext的初始值中，消费时直接从AuthContext取对应属性即可，减少context嵌套。

• 问题2：toggleButton的useCallback存在闭包问题
  你当前的toggleButton用useCallback包裹时依赖数组为空，内部读取的isPressed永远是首次渲染的初始值false，即使第一次触发成功把状态改成true，后续调用还是会执行setIsPressed(!false)也就是设为true，状态无法正常切换。
  修复方式：用函数式更新写法读取最新的状态，不需要依赖isPressed：

// App.tsx 修复toggleButton逻辑
const toggleButton = useCallback(()=>{
    setIsPressed(prevState => !prevState);
},[]);

• 问题3：切换按钮未绑定点击事件
  你LoginBar.tsx里的.toggle-button div没有绑定onClick事件，点击按钮不会触发toggleButton方法，状态自然不会更新。
  修复方式：给切换按钮绑定点击事件：

// LoginBar.tsx 修复按钮绑定
<div 
  className="toggle-button"
  onClick={() => hamburgerButton.toggleButton()}
>
  <span className="bar"> </span>
  <span className="bar"> </span>
  <span className="bar"> </span>
</div>

• 冗余代码清理：LoginBar中定义的const [pressed, setIsPressed] = useState(false);全程未使用，可以直接删除。

内容的提问来源于stack exchange，提问作者Oz Shurki