“（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)RangeError: 超出最大调用堆栈大小

这是调用堆栈：

react-hot-loader.development.js?2cd8:2202 Uncaught RangeError: 超出最大调用堆栈大小 在 renderReconciler (react-hot-loader.development.js?2cd8:2202) 在 Object.asyncReconciledRender [作为 componentWillRender] (react-hot-loader.development.js?2cd8:2220) 在 Component.hotComponentRender (react-hot-loader.development.js?2cd8:718) 在 Component.proxiedRender (react-hot-loader.development.js?2cd8:750) 在 Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) 在 Component.proxiedRender (react-hot-loader.development.js?2cd8:750) 在 Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) 在 Component.proxiedRender (react-hot-loader.development.js?2cd8:750) 在 Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) 在 Component.proxiedRender (react-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 而不是 props 中传递给它的组件。