我正在将Next.js与React Redux配合使用,如果用户符合要求,我想将其重定向到某个页面。我将其添加到我的计算机中,useEffect
并且可以运行,但是每次当我返回首页时,它都会再次重定向到同一页面。如果我刷新要清除redux状态的页面,它会很好地工作。
useEffect(() => {
const validateUser = (services: ServiceType[]) => {
if (services.length === 0) {
router.push('/dashboard/expert/onboard');
} else {
router.push(
'/dashboard/expert/[expertname]?view=overview',
`/dashboard/expert/${userProfile.expertProfile.name}?view=overview`
);
}
};
if (userProfile) {
if (userProfile.isVerified) {
if (nextPath && nextPath.as) {
router.push(nextPath.href, nextPath.as);
} else if (userProfile.isExpert) {
setModalVisible(false);
if (services) {
validateUser(services);
}
// setAlreadySignedUpModalVisible(true);
} else if (loginResponse && loginResponse.expertApplications.rejected > 0) {
setModalVisible(false);
setApplicationRejectedModalVisible(true);
} else if (loginResponse && loginResponse.expertApplications.pending > 0) {
setModalVisible(false);
setApplicationReceivedModalVisible(true);
setIsPendingExpert(true);
} else {
if (nextPath) {
router.push(nextPath.href);
}
setModalVisible(false);
}
} else {
setModalVisible(false);
setEmailVerifyModalVisible(true);
}
}
}, [
loginResponse,
setAlreadySignedUpModalVisible,
setApplicationReceivedModalVisible,
setApplicationRejectedModalVisible,
setEmailVerifyModalVisible,
setModalVisible,
userProfile,
nextPath,
setIsPendingExpert,
services,
]);
我知道你想重定向的那一刻,当用户登录和验证。
那是对某些特定事件的反应,因此您需要某种“事件处理程序”。
useEffect
是不是一个事件处理程序,useEffect
是为“保持同步状态”。
因此,useEffect
在您的情况下,无论应用程序是否处于特定状态,都希望进行重定向,无论用户是刚刚登录还是之前已经登录,都将给出该状态。
(例如,请注意,useEffect
在首次加载组件时,始终至少调用一次,以便最初状态是同步的。)
通过将发生的瞬间包括在状态中,可以将“映射”和事件映射到状态。这并不总是那么琐碎,因为“它刚刚发生”的意思是“此后没有发生任何矛盾的事情”,并且您可能无法监视(甚至不知道)所有冲突的事件。
因此,您的事件状态不仅“已登录并已验证”。我认为您可以像这样描述所需的状态:
“由于用户在页面上并且已登录且有效,因此登录状态已更改”
例如
const [ hasLoggedInSinceOnPage, setHasLoggedInSinceOnPage ] = useState(false);
...
loginRequest.then( (xyz)=>{
yourLoginCode(xyz);
setHasLoggedInSinceOnPage(true);
});
...
useEffect(()=>{
setHasLoggedInSinceOnPage(false);
}, [ currentPage ]);
另一个想法是像这样的状态wasRedirectedAlready
。
如果可能的话,我将尝试router.push
由于登录事件而直接调用Direct(即,不使用useEffect)。这可能需要对代码进行一些重新设计。有时也可能无法以一种干净的方式来实现(我对此不太确定)。
例如:
loginRequest.then( (xyz)=>{
validate(xyz).then( (isValid)=>{
router.push('...');
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句