"(AppContainer)RangeError: Maximum call stack size exceeded" - React with react hot loader

Question

我正在为真正的 st运行ge 错误而苦苦挣扎，我在过去 2 小时内没有找到解决方案，所以我决定寻求帮助。

我已经安装了 React、Redux、Webpack、React Hot Loader，全部使用 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: 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
  });

但这并没有帮助。

非常感谢任何帮助。

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

Answer 1

ProtectedRoute 的渲染方法 returns React.Component 而不是在 props 中传递给它的组件。

"(AppContainer)RangeError: Maximum call stack size exceeded" - React with react hot loader

"(AppContainer)RangeError: Maximum call stack size exceeded" - React with react hot loader

javascript

reactjs

webpack

react-hot-loader