Почемувызвать бесконечный цикл / сбой в моем приложении React?

Question

В настоящее время я разрабатываю интерфейсное приложение React + Redux и сталкиваюсь с проблемой, которая кажется мне необъяснимой.При использовании компонента он работает правильно с любой другой страницы, кроме домашней страницы (/ route).При щелчке на главной странице происходит сбой приложения / браузера.

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

У меня есть следующие настройки:

src / index.js

...

render(
    <Provider store={store}>
        <BrowserRouter>
            <Fragment>
                <Header/>
                <Switch>
                    <PrivateRoute path="/" exact={true} component={Home}/>
                    <PrivateRoute path="/profile" exact={true} component={Profile}/>
                    <PrivateRoute path="/settings" component={settings}/>
                    <Route path="/login" component={loginPage}/>
                    <Route path="/logout" component={logoutPage}/>
                </Switch>
                <Footer/>
            </Fragment>
        </BrowserRouter>
    </Provider>,
    document.getElementById('mount')
);

...

src / layout / footer.js

...
                    <div className="col">
                        <ul>
                            <li>
                                <Link to="/">Privacy</Link>
                            </li>
                            <li>
                                <Link to="/">Another Link</Link>
                            </li>
                            <li>
                                <Link to="/">Disclaimer</Link>
                            </li>
                            <li>
                                <Link to="/">Cookies policy</Link>
                            </li>
                        </ul>
                    </div>
...
export default Footer;

src / pages / home.js

...

render(){
    var homePage = (
        <Fragment>
            <HeroComp />
            <Explainer />
            <StoreFinder />
            <CalloutComp />
        </Fragment>
    );
    return homePage;
}

...

export default connect(mapStateToProps, null)(Home);

Нажатие на любой из компонентов в Нижнем колонтитуле должно отправить меня на домашнюю страницу.Что он делает правильно, если вы находитесь на любой странице, кроме дома.Но если вы уже находитесь на главной странице и нажимаете на ссылку, я ожидаю, что она либо ничего не сделает, но, по-видимому, вылетает из приложения / браузера.Мое лучшее предположение состоит в том, что он каким-то образом запускает бесконечный цикл или утечку памяти, но не может понять, почему.

[Редактировать] Чтобы уточнить, нет никакой реальной ошибки.Браузер просто зависает и перестает отвечать на запросы.Единственный выход - закрыть вкладку.

Answer 1

Отвечая на мой собственный вопрос (никто не мог бы выяснить это без дополнительной информации о проблеме ..)

После некоторого дополнительного исследования / игры я смог выяснить, что проблема заключалась в вызове requestAnimationFrameв Map.js .Оказывается, это созданный мной компонент карт Google (использующий google-maps-реакции ), который инициализирует элемент карты Google в событии onComponentMount .

Однако, если я нахожусь на странице с подключенным компонентом и пытаюсь сделать ссылку на эту страницу с себя (например, на домашнюю страницу и нажав на логотип или кнопку home), компонент пытается снова смонтировать себя.(без должного уничтожения существующего экземпляра карт Google) и вызывает бесконечный цикл.

Чтобы «исправить» это, я просто добавил условный оператор, чтобы проверить, была ли загружена карта.

if(!this.map) ) this.initMap();