Problème de rendu conditionnel : les boutons de connexion/déconnexion ne fonctionnent pas correctement dans React

Question

Je développe une application React et je dois afficher de manière conditionnelle un bouton « Connexion » ou « Déconnexion » en fonction du statut d'authentification actuel de l'utilisateur. Cependant, je rencontre un problème où l'instruction conditionnelle ne fonctionne pas comme prévu. Même une fois l'utilisateur connecté, seul le bouton de connexion est affiché et je ne peux pas me déconnecter à moins que les deux boutons ne soient affichés, ce qui n'est pas le comportement souhaité.

<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

J'ai essayé la méthode ci-dessus mais toujours le même résultat

Answer 1

Vous n'utilisez pas isAuthenticated 的好方法，如果 isAuthenticated 为 True，则需要显示注销按钮，否则如果 isAuthenticated comme False, vous devez afficher le bouton de connexion.

Essayez ceci :

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