Next.js中布尔状态变更后绑定hidden属性的Div无法切换显隐

核心错误点排查 #

• 未使用响应式状态API
  普通JS变量的修改不会被React/Next.js的状态监听机制捕获，哪怕console.log能打印出值变化，组件不会触发重渲染，视图自然停留在初始状态。所有需要驱动视图更新的变量，必须通过useState声明，修改时必须调用配套的setter函数，禁止直接给变量赋值。
• App Router 模式下未声明客户端组件
  Next.js 13+ App Router 目录下的组件默认是服务端组件，不支持useState、onClick等客户端交互能力，组件只会在服务端渲染一次初始状态，后续交互逻辑不会触发视图更新。所有涉及交互、状态的组件，必须在文件顶部第一行添加'use client'指令标记为客户端组件。
• a标签触发默认跳转重置状态
  如果用带href属性的a标签做切换按钮，未阻止默认行为的话，点击时会触发页面跳转/锚点刷新，直接重置组件状态到初始值，看起来就像状态切换完全不生效。要么直接用button标签做交互元素，要么在onClick回调中调用e.preventDefault()阻止默认跳转。

可直接复用的正确写法 #

// 顶部必须加，标记为客户端组件
'use client';
import { useState } from 'react';

export default function ToggleComponent() {
  // 用useState声明响应式布尔状态
  const [isVisible, setIsVisible] = useState(true);

  const handleToggle = (e) => {
    // 阻止a标签默认跳转行为，如果用button标签可以省略这行
    e.preventDefault();
    // 调用setter修改状态，用函数式更新避免闭包问题
    setIsVisible(prevState => !prevState);
  };

  return (
    <div>
      <a href="#" onClick={handleToggle}>点击切换显示</a>
      {/* hidden属性绑定写法 */}
      <div hidden={isVisible}>第一个Div：isVisible为true时隐藏</div>
      <div hidden={!isVisible}>第二个Div：isVisible为false时隐藏</div>
      {/* 条件渲染写法 */}
      {isVisible && <div>wow</div>}
    </div>
  );
}

按以上写法调整后，点击切换即可正常驱动视图更新，两种绑定方式都能按预期工作。

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