如何防止用户登出时弹出登录对话框

Question

我有一个弹出对话框，显示当用户点击登录。这允许用户使用电子邮件/密码或谷歌登录。他们也可以在这里注册。

问题是，一旦他们登录，登录链接更改为注销。当您单击登出链接时，它将注销用户，但随后再次显示登出对话框。据我所知，它不应该这样做。它检查是否存在currentUser，如果存在，则启动注销过程，否则显示对话框。

如何防止在用户退出时显示对话框?

const Header = ({ currentUser, hidden, signOutStart }) => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<sc.HeaderContainer>
<sc.LogoContainer to={'/'}>
<Logo className={'logo'} />
</sc.LogoContainer>
<sc.OptionsContainer>
<sc.OptionLink to={'/shop'}>SHOP</sc.OptionLink>
<sc.OptionLink to={'/contact'}>CONTACT</sc.OptionLink>
{currentUser ? (
<sc.OptionLink as={'div'} to={'/#'} onClick={signOutStart}>
SIGN OUT
</sc.OptionLink>
) : (
<sc.OptionsContainer>
<sc.OptionLink onClick={handleClickOpen} to={'/#'}>SIGN IN</sc.OptionLink>
<SignInSignUpDialogue onClose={handleClose} open={open} />
</sc.OptionsContainer>
)}
<CartIcon />
</sc.OptionsContainer>
{hidden ? null : <CartDropdownContainer />}
</sc.HeaderContainer>
);
};
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
hidden: selectCartHidden,
});
const mapDispatchToProps = dispatch => ({
signOutStart: () => dispatch(signOutStart()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);

Answer 1

从代码中，您只有2个选项。显示Sign in对话框或Sign out链接和您解释的行为是有意义的。退出后，您将看到登录对话框。代码就是这样编写的。如果您想避免这种情况，您可以创建一个route，其中用户被告知他已注销，并且显示一个不错的注销页面，没有对话框。

Answer 2

新增signOut功能:

const signOut = () => {
signOutStart();
setOpen(false);
};

和改变:

<sc.OptionLink as={'div'} to={'/#'} onClick={signOutStart}>

:

<sc.OptionLink as={'div'} to={'/#'} onClick={signOut}>