javascript - "(AppContainer)RangeError: Maximum call stack size exceeded"- 与 react 热加载器 react

Question

我正在为非常奇怪的错误而苦苦挣扎，过去 2 个小时我没有找到解决方案，所以我决定寻求帮助。

我已经设置了 React、Redux、Webpack、React Hot Loader，所有这些都带有 TypeScript。

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

它正在正确编译，但我无法让 protected 路由工作，因为如果用户经过身份验证，那么它应该呈现提供的组件，它会从这个问题的标题中抛出错误。

这是我的 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;
};

我可以将任何东西传递给 protected 路由，它总是会抛出:

(AppContainer)RangeError: Maximum call stack size exceeded

这是调用堆栈:

react-hot-loader.development.js?2cd8:2202 Uncaught RangeError: Maximum call stack size exceeded at renderReconciler (react-hot-loader.development.js?2cd8:2202) at Object.asyncReconciledRender [as componentWillRender] (react-hot-loader.development.js?2cd8:2220) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:718) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at 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
  });

但这并没有帮助。

我将非常感谢任何帮助。

具有重复问题的 repo :https://github.com/murbanowicz/rhl-issue

Answer 1

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