我正在开发一个 React 应用程序,我需要根据用户当前的身份验证状态有条件地呈现“登录”或“注销”按钮。但是,我遇到了条件语句未按预期工作的问题。即使用户登录后,也只显示登录按钮,除非同时显示两个按钮,否则我无法注销,这不是所需的行为。
<div className="auth"> { isAuthenticated ? (<button onClick={() => loginWithRedirect()}><CiLogin /></button>) : (<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button>) } </div>
import React from 'react' import { FaTruckMoving } from 'react-icons/fa'; import { AiOutlineHeart, AiOutlineUser } from 'react-icons/ai' import { BsBagCheck } from 'react-icons/bs' import { CiLogin, CiLogout } from 'react-icons/ci' import './Nav.css' import { Link } from 'react-router-dom'; import { useAuth0 } from "@auth0/auth0-react"; const Nav = () => { const { loginWithRedirect, logout, user, isAuthenticated } = useAuth0(); let authButton; if (isAuthenticated) { authButton = ( <button onClick={() => loginWithRedirect()}><CiLogin /></button> ); } else { authButton = ( <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button> ); } return ( <> <div className="free"> <div className='icon'> <FaTruckMoving /> </div> <p> Free Shipping for Orders upto Rs.1000 </p> </div> <div className="main_header"> <div className="container"> <div className="logo"> <img src="./img/logo.svg" alt="Logo" style={{width:'120px'}}/> </div> <div className="search_box"> <input type="text" defaultValue="" placeholder="Enter the Product Name" autoComplete='off' /> <button>Search</button> </div> <div className="icon"> { isAuthenticated && ( <div className="account"> <div className="user_icon"> <AiOutlineUser /> </div> <p>Hello, {user.name}</p> </div> ) } <div className="second_icon"> <Link to="/" className='link'><AiOutlineHeart /></Link> <Link to="/cart" className='link'><BsBagCheck /></Link> </div> </div> </div> </div> <div className="header"> <div className="container"> <div className="nav"> <ul> <li> <Link to='/' className='link'>Home</Link> </li> <li> <Link to='/product' className='link'>Product</Link> </li> <li> <Link to='/about' className='link'>About</Link> </li> <li> <Link to='/contact' className='link'>Contact</Link> </li> </ul> </div> <div className="auth"> {authButton} </div> </div> </div> </> ) } export default Nav
我尝试了上述方法,但结果仍然相同
P粉2450036072023-09-11 11:30:05
您没有使用 isAuthenticated
的好方法,如果 isAuthenticated
为 True,则需要显示注销按钮,否则如果 isAuthenticated
为 False您需要显示登录按钮。
试试这个:
{ isAuthenticated ? (<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}><CiLogout /></button>) : (<button onClick={() => loginWithRedirect()}><CiLogin /></button>) }