React中Login/Logout按钮条件渲染失效问题

• 问题根源：你在两种实现方式中都把认证状态与按钮的对应逻辑搞反了：

  • 当isAuthenticated为true（用户已登录）时，代码错误渲染了Login按钮，而非Logout按钮
  • 当isAuthenticated为false（用户未登录）时，错误渲染了Logout按钮，而非Login按钮

• 修正后的代码实现

  方式一：修正三元表达式

  <div className="auth">
      {
          isAuthenticated ?
          (<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button>)
          :
          (<button onClick={() => loginWithRedirect()}><CiLogin /></button>)
      }
  </div>
  

  方式二：修正if-else逻辑

  const Nav = () => {
      const { loginWithRedirect, logout, user, isAuthenticated  } = useAuth0();
      let authButton;
  
    if (isAuthenticated) {
      // 用户已登录，渲染Logout按钮
      authButton = (
        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button>
      );
    } else {
      // 用户未登录，渲染Login按钮
      authButton = (
        <button onClick={() => loginWithRedirect()}><CiLogin /></button>
      );
    }
    // 其余代码保持不变...
  }
  

• 验证逻辑：修正后，用户登录时isAuthenticated为true，会渲染Logout按钮，点击即可执行登出；未登录时渲染Login按钮，点击触发登录跳转，完全符合预期行为。

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