React项目中用户登录后仍显示登录入口的问题求助

你已经通过useUserContext获取到了用户登录状态isSignedIn，但没有利用这个状态控制「Entrar」按钮的显示逻辑，这就是登录后按钮仍持续显示的原因。只需给「Entrar」的span添加条件渲染即可解决：

修改步骤 #

找到包含「Entrar」的span标签，用!isSignedIn作为判断条件，仅当用户未登录时才渲染该元素：

// 原代码
<span className='signin'>
  Entrar
</span>

// 修改后
{!isSignedIn && (
  <span className='signin'>
    Entrar
  </span>
)}

完整修改后的组件代码 #

const AccountMenu = React.lazy(() => import('@magento/venia-ui/lib/components/AccountMenu'));

/**
 * The AccountTrigger component is the call to action in the site header
 * that toggles the AccountMenu dropdown.
 *
 * @param {Object} props
 * @param {Object} props.classes - CSS classes to override element styles.
 */
const AccountTrigger = props => {
    const talonProps = useAccountTrigger();
    const {
        accountMenuIsOpen,
        accountMenuRef,
        accountMenuTriggerRef,
        setAccountMenuIsOpen,
        handleTriggerClick
    } = talonProps;

    const classes = useStyle(defaultClasses, props.classes);
    const rootClassName = accountMenuIsOpen ? classes.root_open : classes.root;
    const { formatMessage } = useIntl();
    const [{ isSignedIn }] = useUserContext();

    return (
        <Fragment>
            <AccountTriggerContainer>
                <div className={rootClassName} ref={accountMenuTriggerRef}>
                    <button
                        aria-label={formatMessage({
                            id: 'accountTrigger.ariaLabel',
                            defaultMessage: 'Toggle My Account Menu'
                        })}
                        className={`${classes.trigger} trigger-action`}
                        onClick={handleTriggerClick}
                        data-cy="AccountTrigger-trigger"
                    >
                        <AccountChip
                            fallbackText={formatMessage({
                                id: 'accountTrigger.buttonFallback',
                                defaultMessage: 'Bem vindo(a)'
                            })}
                            shouldIndicateLoading={true}
                        />
                        {/* 添加条件渲染控制显示 */}
                        {!isSignedIn && (
                          <span className='signin'>
                              Entrar
                          </span>
                        )}
                    </button>
                </div>
                <Suspense fallback={null}>
                    <AccountMenu
                        ref={accountMenuRef}
                        accountMenuIsOpen={accountMenuIsOpen}
                        setAccountMenuIsOpen={setAccountMenuIsOpen}
                    />
                </Suspense>
            </AccountTriggerContainer>
        </Fragment>
    );
};

export default AccountTrigger;

AccountTrigger.propTypes = {
    classes: shape({
        root: string,
        root_open: string,
        trigger: string
    })
};

逻辑说明 #

• isSignedIn是useUserContext提供的登录状态，用户登录后值为true，未登录时为false
• 利用{!isSignedIn && <元素/>}的语法，仅当用户未登录时才渲染「Entrar」按钮
• 登录后!isSignedIn变为假，该span不再渲染，实现隐藏效果

内容的提问来源于stack exchange，提问作者Roger