Isu pemaparan bersyarat: Butang log masuk/log keluar tidak berfungsi dengan betul dalam React

Question

Saya sedang membangunkan apl React dan saya perlu memberikan butang "Log Masuk" atau "Keluar" secara bersyarat berdasarkan status pengesahan semasa pengguna. Walau bagaimanapun, saya menghadapi isu di mana pernyataan bersyarat tidak berfungsi seperti yang diharapkan. Walaupun selepas pengguna log masuk, hanya butang log masuk ditunjukkan dan saya tidak boleh log keluar melainkan kedua-dua butang ditunjukkan, yang bukan tingkah laku yang diingini.

<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

Saya dah cuba cara di atas tapi hasilnya tetap sama

Answer 1

Anda tidak menggunakan isAuthenticated 的好方法，如果 isAuthenticated 为 True，则需要显示注销按钮，否则如果 isAuthenticated sebagai Palsu anda perlu menunjukkan butang log masuk.

Cuba ini:

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