React 앱에서 무한 루프/충돌을 일으키는 이유는?

React 앱에서 무한 루프/충돌을 일으키는 이유는?

현재 React+Redex 프런트 엔드 앱을 개발 중인데, 내게는 설명할 수 없을 것 같은 문제에 부딪히고 있다.컴포넌트를 사용할 때는 홈페이지(/경로)를 제외한 다른 페이지에서도 올바르게 작동한다.홈페이지에서 클릭하면 앱/브라우저가 다운된다.

나는 리액터-루터-리액션-리펙스를 태그에 포함시켰다. 왜냐하면 나는 리액터-리액션-리플렉스를 사용하기 때문이다. 그들이 실제로 문제의 원인에 어떤 기여를 했는지 모르겠다.

다음과 같은 설정이 있다.

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/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/페이지/home.js

...

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

...

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

바닥글의 구성 요소를 클릭하면 홈페이지로 보내진다.집 말고 다른 페이지에 있으면 제대로 되는 거지.하지만 만약 당신이 이미 홈페이지에 있고 링크를 클릭한다면 나는 그것이 아무것도 하지 않을 것이라고 예상하지만, 그것은 겉보기에는 앱/브라우저를 망가뜨린다.내 추측으로는 그것이 어떻게든 무한 루프나 메모리 누출을 시작하지만 그 이유를 알 수 없다는 것이다.

[편집] 명확히 하자면 실제 오차는 없다.눈썹이 얼어서 반응이 없어진다.유일한 탈출구는 탭을 닫는 것이다.

내 자신의 질문에 대답하는 것 (문제에 대한 더 많은 정보가 없었다면 아무도 이것을 알아낼 수 없었을 것이다.

좀 더 연구/놀음을 한 후에 나는 Map.js의 AnimationFrame의 요청 전화에 문제가 있다는 것을 알아낼 수 있었다.알고 보니, 이것은 온 컴포넌트마운트 이벤트에서 구글 맵 요소를 초기화하는 (구글맵 리액트 사용) 구글 맵 컴포넌트 입니다.

그러나 컴포넌트가 탑재된 페이지에 있는 경우 자체에서 해당 페이지로 링크하려고 하면(예: 홈페이지와 로고 또는 홈버튼 클릭), 컴포넌트가 다시 마운트(기존 구글 맵 인스턴스를 적절히 파괴하지 않고)하여 무한루프를 발생시킨다.

이것을 "수정"하기 위해서, 나는 단지 지도가 로드되었는지 확인하기 위해 조건문을 추가했을 뿐이다.

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

참조URL: https://stackoverflow.com/questions/54745953/why-does-link-to-cause-an-infinite-loop-crash-in-my-react-app