如何不修改Redux状态处理真值语句，实现导航栏内容切换？

核心问题分析 #

你当前的代码存在几个关键问题：

1. 冗余维护了本地isLoggedIn状态，反而增加了Redux状态与本地状态不同步的风险
2. 导航栏的条件渲染逻辑写反了（当前是登录状态下显示登录/注册链接，不符合业务预期）
3. 空对象{}在JavaScript中属于真值，直接判断user是否存在会失效，但你其实不需要依赖user判断登录状态——Redux里已经有isLoggedIn布尔值可以直接使用

不修改Redux状态的解决步骤 #

1. 移除冗余的本地状态和副作用

直接使用Redux中已有的loginStatus.isLoggedIn和user，不需要同步到本地useState，这能减少不必要的重渲染和逻辑混乱。删除以下代码：

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [avatar, setAvatar] = useState({});

useEffect(() => {
  if (loginStatus) {
    setIsLoggedIn(loginStatus)
    setAvatar(user)
  }
}, [loginStatus, isLoggedIn, isActive, avatar])

2. 修正导航栏的条件渲染逻辑

根据loginStatus布尔值直接判断，未登录时显示登录/注册链接，登录后显示用户头像：

return (
  <div className="App">
    <nav className="navbar">
      <div className="logo">
        <Link to={'/'} onClick={() => setIsActive(false)}>
          <img src='https://cdn-icons-png.flaticon.com/512/201/201623.png' />
        </Link>
      </div>
      <h1 className="title">Travel.com</h1>
      {/* 未登录时显示登录/注册入口 */}
      {!loginStatus && (
        <ul className='menu'>
          <li className="link">
            <Link style={linkStyle} to='/login' onClick={() => setIsActive(true)}>Log-in</Link>
          </li>
          <li className="link">
            <Link style={linkStyle} to='/register' onClick={() => setIsActive(true)}>Register</Link>
          </li>
        </ul>
      )}
      {/* 登录时显示用户头像信息 */}
      {loginStatus && (
        <div className="avatar">
          <h6> Hi {user.user_name}!</h6>
        </div>
      )}
    </nav>
    {/* 其他路由代码... */}
  </div>
)

3. （可选）基于user对象的兜底判断

如果担心Redux的isLoggedIn状态不可靠，需要通过user对象判断是否登录，可以用以下方式检测空对象：

// 检查user是否为空对象
const isUserEmpty = Object.keys(user).length === 0;

// 渲染时结合判断
{isUserEmpty && (
  // 未登录内容
)}
{!isUserEmpty && (
  // 登录内容
)}

方案优势 #

• 直接复用Redux中维护的isLoggedIn布尔值，彻底避开空对象的真值判断陷阱
• 移除冗余的本地状态，消除状态不同步的潜在问题
• 修正后的条件渲染逻辑完全符合“未登录显示登录入口，登录后显示用户信息”的业务预期

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