Problem beim bedingten Rendern: Anmelde-/Abmeldeschaltflächen funktionieren in React nicht ordnungsgemäß

Question

Ich entwickle eine React-App und muss abhängig vom aktuellen Authentifizierungsstatus des Benutzers eine Schaltfläche „Anmelden“ oder „Abmelden“ bedingt rendern. Allerdings stoße ich auf ein Problem, bei dem die bedingte Anweisung nicht wie erwartet funktioniert. Selbst nachdem der Benutzer angemeldet ist, wird nur die Anmeldeschaltfläche angezeigt und ich kann mich nicht abmelden, es sei denn, beide Schaltflächen werden angezeigt, was nicht das gewünschte Verhalten ist.

<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

Ich habe die obige Methode ausprobiert, aber immer noch das gleiche Ergebnis

Answer 1

您没有使用 isAuthenticated 的好方法，如果 isAuthenticated 为 True，则需要显示注销按钮，否则如果 isAuthenticated 为 False您需要显示登录按钮。

试试这个：

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