«(AppContainer) RangeError: Превышен максимальный размер стека вызовов» - реагирует с реагирующим горячим загрузчиком - PullRequest
Новая
       30

«(AppContainer) RangeError: Превышен максимальный размер стека вызовов» - реагирует с реагирующим горячим загрузчиком

0 голосов
/ 11 февраля 2019

Я борюсь с действительно странной ошибкой и не нашел решения за последние 2 часа, поэтому решил обратиться за помощью.

У меня есть настройки React, Redux, Webpack, React Hot Loader, всес TypeScript.

Я использовал шаблон, но после того, как столкнулся с этой проблемой, я изменил конфигурацию веб-пакета, чтобы отразить пример из репозитория 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: Превышен максимальный размер стека вызовов

Это стек вызовов:

реагироватьгорячей loader.development.js? 2cd8: 2202 Uncaught RangeError: Максимальный размер стека вызовов превышен в renderReconciler (react-hot-loader.development.js? 2cd8: 2202) в Object.asyncReconciledRender [as componentWillRender] (react-hot-loader.development.js)? 2cd8: 2220) в Component.hotComponentRender (response-hot-loader.development.js? 2cd8: 718) в Component.proxiedRender (response-hot-loader.development.js? 2cd8: 750) в Component.hotComponentRender (реагироватьhot-loader.development.js? 2cd8: 730) в Component.proxiedRender (response-hot-loader.development.js? 2cd8: 750) в Component.hotComponentRender (response-hot-loader.development.js? 2cd8: 730)в Component.proxiedRender (response-hot-loader.development.js? 2cd8: 750) в Component.hotComponentRender (реагировать-hot-loader.development.js? 2cd8: 730) в Component.proxiedRender (реагировать-горячий-загрузчик.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

1 Ответ

0 голосов
/ 11 февраля 2019

Метод render ProtectedRoute возвращает React.Component вместо компонента, переданного ему в реквизитах.

...