條件渲染問題：登入/登出按鈕在 React 中無法正常運作

Question

我正在開發一個 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

我嘗試了上述方法，但結果仍然相同

Answer 1

您沒有使用isAuthenticated 的好方法，如果isAuthenticated 為True，則需要顯示登出按鈕，否則如果isAuthenticated 為False您需要顯示登入按鈕。

試試這個：

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