React+Tailwind导航栏条件渲染问题：登录状态切换无响应

你的导航栏项目不随登录状态变化，核心问题有三个：

1. links数组未随登录状态更新：links定义在组件顶层，初始化时基于isLoggedIn的初始空字符串生成，后续isLoggedIn变化时，links不会重新计算，导致导航项的显示逻辑一直停留在初始状态。
2. isLoggedIn初始值类型错误：初始值设为空字符串，和登录状态的布尔属性不匹配，会导致初始显示逻辑异常。
3. className显示逻辑混乱：原代码中link.show && (link.show ? "" : "hidden")的写法错误，当link.show为false时，无法正确添加hidden类。

修复后的完整代码 #

import { useState, useEffect, useMemo } from 'react';
import { auth, onAuthStateChanged } from './firebase'; // 根据你的实际文件路径调整

export default function Navigation() {
  // 初始化登录状态为布尔值false
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 依赖isLoggedIn重新生成links数组，确保状态变化时更新显示规则
  const links = useMemo(() => [
    { name: "Signup", link: "#", show: !isLoggedIn },
    { name: "Signin", link: "#", show: !isLoggedIn },
    { name: "Logout", link: "#", show: isLoggedIn },
    { name: "Profiles", link: "#", show: true },
    { name: "Contact", link: "#", show: true },
  ], [isLoggedIn]);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      console.log(user);
      // 直接将用户存在状态转为布尔值，简化逻辑
      setIsLoggedIn(!!user);
    });

    return unsubscribe;
  }, []);

  return (
    <ul>
      {links.map((link) => (
        <li key={link.name}>
          <a
            href={link.link}
            className={`p-2 ${!link.show ? 'hidden' : ''}`}
            aria-current={link.name === 'Home' ? 'page' : undefined} // 按需调整首页标识
          >
            {link.name}
          </a>
        </li>
      ))}
    </ul>
  );
}

关键修复说明 #

• 动态更新links数组：用useMemo绑定isLoggedIn作为依赖，每次登录状态变化时，自动重新计算每个导航项的show属性；也可以直接在组件内定义links（无需useMemo，数组创建开销极低）。
• 修正状态初始值：将isLoggedIn初始值设为false，符合布尔类型的状态逻辑。
• 简化登录状态判断：在onAuthStateChanged回调中用!!user直接转换用户存在状态，逻辑更清晰。
• 修复显示控制逻辑：用!link.show ? 'hidden' : ''直接判断，当show为false时添加hidden类，正确控制元素的显示隐藏。

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