"(AppContainer)RangeError:超过最大调用堆栈大小“-与React热加载程序反应

Question

我一直在与非常奇怪的错误作斗争，在过去的两个小时里，我没有找到解决办法，所以我决定寻求帮助。

我有React，Redux，Webpack，React热装载机的设置，都是用TypeScript。

我使用了样板，但当我遇到这个问题后，我改变了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)RangeError:超过最大调用堆栈大小

这是调用堆栈：

. at ?2 cd8:2202个未加限制的RangeError:在Object.asyncReconciledRender as componentWillRender at Component.hotComponentRender上超过的最大调用堆栈大小(750 Hot-loader.Development.js?2cd8:2202)，在Component.hotComponentRender (react Hot-loader.Development.js?2cd8:718)在Component.proxiedRender (750 Hot-loader.Development.js?2cd8:750)中超过了Component.hotComponentRender(750 Hot-loader.Development.js?2cd8:730)。在Component.proxiedRender (react Hot-loader.Development.js?2cd8:750) at Component.hotComponentRender (Reacti-Hot-loader.Development.js?2cd8:730)在Component.proxiedRender (react Hot-loader.Development.js?2cd8:750)在Component.hotComponentRender (Reacti-Hot-loader.Development.js?2 cd8:730)在Component.proxiedRender (750 Hot-loader.Development.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.Component，而不是在道具中传递给它的组件。