Question

我目前正在开发React + Redux前端应用程序，并且遇到了我无法解释的问题。使用组件时，它可以在除主页（/路由）之外的任何其他页面上正常工作。从主页上单击时，它会使应用程序/浏览器崩溃。

我在标签中包含了react-router和react-redux，因为我使用了这些库，但我不知道它们是否真的对问题的起因有所帮助。

我有以下设置：

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);

单击页脚中的任何组件都应将我带到主页。如果您不在主页上，那么它可以正确执行哪些操作。但是，如果您已经在主页上并单击链接，我希望它要么不执行任何操作，但似乎会使应用程序/浏览器崩溃。我最好的猜测是，它以某种方式启动了无限循环或内存泄漏，但无法弄清原因。

[编辑] 要澄清的是，没有实际错误。 browsertab只是冻结而变得无响应。唯一的出路就是关闭标签页。

Answer 1

回答我自己的问题（没有更多关于该问题的信息，没人能解决这个问题。）

经过更多研究/研究，我发现问题出在 Map.js 中的requestAnimationFrame调用。原来，这是我创建的一个Google Maps组件（使用 google-maps-react ），它将在 onComponentMount 事件中初始化一个Google map元素。

但是，如果我在已安装组件的页面上，并尝试从自身链接到该页面（例如，主页并单击徽标或主页按钮），则该组件将尝试再次自身安装（没有正确安装）销毁现有的Google Maps实例）并导致无限循环。

要“修复”此问题，我仅添加了一条条件语句来检查地图是否已加载。

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

为什么<link to =“ /” />会在我的React应用程序中导致无限循环/崩溃？

1 个答案: