3

我正在使用带有 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,
  ]);
4

1 回答 1

0

我了解您希望在用户登录并通过验证时进行重定向。

那是对某些特定事件的反应，因此您需要某种“事件处理程序”。

useEffect不是事件处理程序，useEffect用于“保持状态同步”。

因此useEffect，在您的情况下，只要应用程序具有特定状态，无论用户是刚刚登录还是之前已经登录，都会给出重定向。
（例如，请注意，useEffect第一次加载组件时总是至少调用一次，以便状态最初是同步的。）

解决方案 1

通过将发生的时刻包含在状态中，可以将某种“映射”和事件映射到状态。这并不总是微不足道的，因为“它刚刚发生”意味着“从那以后没有发生任何矛盾的事情”，您可能无法监视（甚至知道）所有冲突事件。

因此，您的事件状态不仅是“登录并已验证”。我认为您可以描述所需的状态，例如：
“登录状态已更改，因为用户在页面上并且已登录并且有效”

例如

const [ hasLoggedInSinceOnPage, setHasLoggedInSinceOnPage ] = useState(false);
...
loginRequest.then( (xyz)=>{
    yourLoginCode(xyz);
    setHasLoggedInSinceOnPage(true);
});
...
useEffect(()=>{
    setHasLoggedInSinceOnPage(false);
}, [ currentPage ]);

另一个想法是像wasRedirectedAlready.

解决方案 2

如果可能的话，我会尝试router.push直接调用登录事件的结果（即不使用useEffect）。这可能需要重新设计代码。有时也可能无法以一种干净的方式进行（我对此不确定）。

例如：

loginRequest.then( (xyz)=>{
    validate(xyz).then( (isValid)=>{
        router.push('...');
    });
});
于 2021-02-24T16:37:25.573 回答