javascript - 在自定义 React Router v5 路由中调用自定义钩子会导致超出最大更新深度错误

Question

这是我在 StackOverflow 上的第一篇文章，我会感谢大家花时间帮助解决我遇到的问题。

堆栈： React 17.0.1、React Router Dom 5.2.0、Redux 4.0.5

预期行为：自定义路由组件应检查处于 redux 状态的 auth 对象的时间戳属性，并验证（使用自定义挂钩）它是 20 分钟还是更早。如果检查通过，则路由显示请求的内容，否则将用户重定向到登录页面。

实际行为：应用程序启动后立即超出最大更新深度错误

我尝试了什么：

• 我将自定义钩子更改为只返回 false 然后返回 true 以确保这不是由不正确的钩子行为引起的。仍然得到错误和真实返回值的错误。
• 仅使用时间戳验证的结果作为渲染道具内路由三元运算符的唯一条件。仍然收到错误。
• 将存储在渲染道具函数内的三元运算符中调用自定义钩子的结果的变量（authTimestampValid）替换为：true -无错误，false - 错误

结论：我尝试过的事情让我相信我在自定义路由组件中创建了自定义钩子调用的无限循环，但我不明白如何。实际上可能并非如此，因为在将 authTimestampValid 替换为 false 时仍然出现错误。

const PrivateRoute = ({ children, ...rest }) => {
  const isAuthenticated = useSelector((state) => state.auth)
  const assetsLoaded = useSelector((state) => state.loading.status === 'FETCHED')
  const fetchError = useSelector((state) => state.loading)
  const { valid: authTimestampValid } = useVerifyTimestamp()

  return (
    <Route
      {...rest}
      render={({ location }) => (
        isAuthenticated.uid && authTimestampValid
        ? (
            <>
              <Navigation />
              {assetsLoaded
                ? children
                : fetchError.status === 'FETCH_ERR'
                  ? <p>{fetchError.error}</p>
                  : <Spinner />
              }
            </>
          ) 
        : (
            <Redirect to={{
              pathname: '/login',
              state: { from: location }
            }}/>
          )
      )}
    />
  )
}

标签： javascriptreactjsreact-routerreact-hooks