“（AppContainer）RangeError：超出最大调用堆栈大小”-使用反应热加载器进行反应

Question

我正在与非常奇怪的错误作斗争，我在过去的2个小时里没有找到解决方案，所以我决定寻求帮助。

我用TypeScript设置了React、Redux、Webpack、React Hot Loader。

我使用了样板文件，但在遇到这个问题后，我更改了webpack配置以反映RHL存储库中的示例。

它编译正确，但我不能得到受保护的路由工作，因为如果用户被认证，所以它应该呈现提供的组件，这是抛出这个问题的标题错误。

这是我的ProtectedRoute组件：

import React, { Component, FunctionComponent } from 'react';
import { Redirect, Route } from 'react-router';
import { isAuthenticated } from './auth';

interface IProps {
  component: Component | FunctionComponent;
  path: string;
}
const ProtectedRoute: FunctionComponent<IProps> = ({ component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (isAuthenticated()) {
        console.log('should render', component);
        return <Component />;
      }
      return <Redirect to="/login" />;
    }}
  />
);

export default ProtectedRoute;

就这么简单。

我只是试图使用：

<ProtectedRoute path="/dashboard" component={() => <div>Test</div>} />

到目前为止，isAuthenticated是一个非常简单的函数:

export const isAuthenticated = () => {
  const accessToken = localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY);
  console.log('checking auth');
  if (accessToken) {
    return true;
  }
  return false;
};

我可以将任何内容传递到受保护的路由，它总是会抛出：

(AppContainer)范围错误:超出了最大调用堆栈大小

这是调用堆栈：

React-hot-loader.development.js？2cd8：2202 未捕获的范围错误：在组件.热加载程序开发（反应热加载程序开发.js.js？2cd8：718）在组件.热加载程序开发（反应热加载程序开发.js？2cd8：718）处，在 Object.asynacher.asconr.js ender（反应热加载程序开发.js？2cd8：750）处，在组件.hot组件更新器（反应热加载程序开发.js？2cd8：730） at Component.proxiedRender （react-hot-loader.开发.js？2cd8：750） 在组件.热加载器开发.js？2cd8：730） 在组件代理发布 （react-hot-loader.开发.js？2cd8：750） 在组件.热加载程序开发（反应-热加载程序.开发.js？2cd8：730） 在组件代理更新器 （react-hot loader.开发.js？2cd8：750）

我真的不知道发生了什么。

我已尝试更改配置:

setConfig({
    logLevel: 'debug',
    ignoreSFC: true, // the same error
    pureRender: true // change error to instance.render is not a function
  });

但这于事无补。

我将非常感谢任何帮助。

具有重复问题的存储库：https://github.com/murbanowicz/rhl-issue

Answer 1

ProtectedRoute的呈现方法返回React。组件而不是在props中传递给它的组件。