Почему я получаю ошибку «Maximum update depth exceeded»?

Question

После того как я добавил проверку на авторизованного пользователя в роутах, стал получать ошибку бесконечного ререндэра. App.js:

function App(props) {

    useEffect(() => props.checkUserToken() , []); // action проверяющий, есть ли JWT в localStorage, если да, то меняет props.isLogin на true
  
    return (
        <div className="d-flex align-items-center justify-content-center">
            <Switch>
                <Route path='/authorization'
                       render={props => !props.isLogin ? <Login {...props} /> : <Redirect to='/main' />}
                />

                <Route path='/main'
                       render={props => props.isLogin ? <MainPage {...props} /> : <Redirect to='/authorization' />}
                />
                <Route
                    render={props => <Redirect to={props.isLogin ? '/main' : '/authorization'} />}
                />
            </Switch>
            {
                props.loading && <Loading />
            }
        </div>
    )
}

Вот, что выводит redux-logger:

Сначала вызывается action "CHECK_TOKEN" (на persist не обращайте внимания), который слушается сагой и в зависимости от результата проверки вызывает action "TOKEN_EXIST", который меняет isLogin на true По идее, дальше должен перерендериться App, опять "зайти" на роут authorization и там редиректить на main, но вылазит ошибка.

Сначала, я подумал, дело в проверке токена, поэтому закоментил хук, заново залогинился, но всё повторилось, авторизация прошла успешно, данные получены, isLogin стал true, но опять вылезла эта ошибка.

Debugger и console.log не срабатывают если их поставить в MainPage, в action и sagas я тоже уверен, т.к. они все прекрасно работали (и сейчас работают), пока я не изменил роуты (сделал проверку)

как я уже писал выше, эта ошибка вылазит, только когда isLogin меняется на true и должен произойти редирект. Полный код ошибки:

Так в чём проблема и как исправить эту ошибку? Заранее, спасибо, за любую помощь!

Answer 1

Нашёл! Как всегда ошибка заключается в мелочи)

<Route path='/authorization'
                       render={props => !props.isLogin ? <Login {...props} /> : <Redirect to='/main' />}
 />

В подобной записи, props.isLogin берётся из LE (Lexical Environment) функции в render, и там оно равно undefined, поэтому постоянно срабатывает ложное условие, и происходит бесконечный редирект c /main на /authorization. Решением является изменение названия параметра props на любое другое имя)

Пример:

<Route path='/authorization'
                       render={lalala => !props.isLogin ? <Login {...lalala} /> : <Redirect to='/main' />}
 />

БЛОГ НА HUSL

Почему я получаю ошибку «Maximum update depth exceeded»?

Ответы (1 шт):