1

我有这个高阶函数：

它应该基于我在条件中使用的一些道具来渲染我的元素。

function GenericIsUserLoggedInLink({ isLoggedIn, logOutUser, route, anchorText }) {
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  } else if (anchorText) {
   return <Link href={route}><a>{anchorText}</a></Link>
  } else {
   return null
  }
 } else {
  return  <Link href="/login"><a>Log in!</a></Link>
 }
}

它从 * Parent 类 Component获取道具，后者从 redux 商店获取这些道具。

*链接到我的仓库以检查整个文件

上面的 HOC 几乎是完美的，但是当有人出于某种原因尝试注销时，我在导航的左侧链接上得到了这种行为。

在此处输入图像描述

我开始认为问题可能是由于重新渲染而我没有做任何事情。

我最近在一个组件类中了解到，componentDidUpdate当组件发生变化时，您会使用生命周期方法。

所以我做了一些挖掘广告，发现这篇关于在 HOC 中应该使用的方法的帖子。我的问题是它应该去哪里？

其实我也想过这样的事情，但是没用。。。

导入反应，{ useEffect } from 'react';

function GenericIsUserLoggedInLink({ isLoggedIn, logOutUser, route, anchorText }) {
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  } else if (anchorText) {
   return <Link href={useEffect(() => {
 {route} // Just took a stab, on second blush I thought it wasn't that crazy!!

}, [route]);}>{anchorText} } else { return null } } else { return 登录！} }

无论如何，我只是想了解一下为什么当您单击注销按钮时，其他导航链接也说登录...

4

1 回答 1

0

在您的链接代码中，您在左侧导航链接上使用您的 HOC，包括您的链接“个人资料”和“仪表板”，并且在您的 HOC 内部，主要条件是：

if (isLoggedIn) {
  ...
} else {
  return  <Link href="/login"><a>Log in!</a></Link>
}

因此，如果您未登录 ( isLoggedin === false)，则返回Link“登录！” 写在里面，这就是渲染而不是你的导航链接。它与其他提到的没有太大关系。

于 2019-10-16T12:26:22.213 回答