React中onClick事件触发后侧边栏无法正常显示

你的代码存在4个核心问题，直接导致状态变了但视图不更新：

• 事件回调函数里不能返回JSX：React只会渲染组件顶层return的JSX结构，你在toggleSideNav事件函数里写的return <Fragment />、return <SideBar />完全不会被React识别渲染，这是最核心的错误。
• Hook调用位置违规：你把useEffect写在了toggleSideNav普通函数内部，违反了React Hook只能在组件顶层调用的规则，本身就会触发运行时报错，而且初始化时调用toggleSideNav会直接把初始状态翻转，和你预期的初始逻辑冲突。
• 状态读取时机错误：React的setState是异步批量更新的，你调用setIsExpanded(!isExpanded)之后立刻读取isExpanded，拿到的是更新前的旧值，你写在事件函数里的if判断拿到的永远是上一轮的状态，逻辑本身就不成立。
• 不规范的相等判断：布尔值判断用了==，存在隐式类型转换的隐患，判断布尔值、引用类型值统一用===更稳妥。

正确实现代码 #

把渲染逻辑和状态更新逻辑完全拆分，状态只负责驱动视图，事件函数只负责修改状态：

import { useState, Fragment } from 'react';
// 正常引入SideBar、FontAwesomeIcon等依赖

function Navigation() {
  // 初始值根据需求设置：默认展开设true，默认收起设false
  const [isExpanded, setIsExpanded] = useState(false);

  // 事件函数仅负责切换状态，不写任何渲染相关逻辑
  const toggleSideNav = () => {
    // 用函数式更新避免闭包导致的状态旧值问题
    setIsExpanded(prevExpanded => !prevExpanded);
  };

  return (
    <div className="nav-container">
      <button onClick={toggleSideNav} aria-label="切换侧边栏">
        <FontAwesomeIcon icon={faBars} />
      </button>
      {/* 渲染逻辑直接放在组件JSX树中，靠状态直接控制显隐 */}
      {isExpanded ? <SideBar /> : null}
      
      {/* 如果不需要卸载侧边栏DOM，仅做视觉隐藏，可以用样式控制：
      <SideBar style={{ display: isExpanded ? 'block' : 'none' }} />
      */}
    </div>
  );
}

export default Navigation;

额外注意点 #

• 所有React Hook（useState/useEffect/useMemo等）必须写在组件/自定义Hook的顶层，不能嵌套在普通函数、条件判断、循环语句中。
• 不要在事件回调、定时器、异步请求回调这类非渲染路径里返回JSX，这类返回值不会被React处理。
• 如果更新状态后需要基于新状态执行副作用逻辑，放到useEffect里监听对应状态即可，不要在setState之后立刻读取状态值。

内容的提问来源于stack exchange，提问作者Adam Jones