동일한 구성 요소 내부에서 호출될 때 라우터 "링크"가 새 데이터를 로드하지 않음

동일한 구성 요소 내부에서 호출될 때 라우터 "링크"가 새 데이터를 로드하지 않음

배경

나는 다음 세부사항으로 앱을 만들고 있다.

• 반응하다
• 반작용의
• 환원하다
• 그것은 보편적인 자바스크립트다.
• 노드 js

문제

로 라우팅할 때Link부품에서 부품으로 태그를 지정하면 완벽하게 작동한다.컴포넌트가 필요로 하는 데이터를 호출하고 페이지를 렌더링한다.그러나 내가 a를 클릭Link현재 구성 요소와 동일한 구성 요소를 사용하는 것은 URL 변경뿐입니다.

시도

내가 노력한 결과들이 효과가 있었어

시도 1

지금까지 나는 이 질문의 단계를 시도했지만 해결책은 나에게 효과가 없을 것이다.이것이 내가 구현한 코드였다.

componentWillReceiveProps(nextProps) {
    if (nextProps.article.get('id') !== this.props.article.get('id')) {
        console.log('i got trigggerd YESSSSSSSSSSSSSSS');
    }
}

그러나 변수nextProps현재의 소품과 항상 같다.

시도 2

나는 내가 사용하는 것과 같은 코드를 부르기로 결심했다.componentWillMount하지만 그것도 효과가 없었어

componentWillMount() {
    let { category, slug } = this.props.params;
    this.props.loadArticleState({ category, slug });
} 

내가 이걸 넣었을 때 무한의 루프를 만들 뿐이지componentWillReceiveProps.

결론

나는 링크가 연결된 데이터를 절대 호출하지 않는 것이 문제라고 생각한다.데이터가 로딩되어 있기 때문에

static fetchData({ store, params }) {
    let { category, slug } = params;
    return store.dispatch(loadArticleState({ category, slug }));
}

어떤 도움이라도 감사하다.

사용한 솔루션

이전 데이터가 변경된 데이터와 동일한지 테스트하기 위해 함수를 만들었다.

compareParams(prevProps, props) {
    if (!prevProps || typeof prevProps.params !== typeof props.params) {
        return false;
    }
    return Object.is(props.params, prevProps.params);
}

그래서 이 테스트는

• 이전의 소품들이 있는가?
• 소품들이 이전의 소품과 같다면?
• 그렇다면 거짓으로 돌려주다.
• 그렇지 않으면 비교 소품 및 이전 소품 매개변수를 볼 수 있다.

구성 요소디드업데이트에서

에서compoonentDidUpdate우리는 데이터가 업데이트되어야 하는지 여부를 결정하기 위해 이 기능을 사용한다.

componentDidUpdate(prevProps) {
    if (this.compareParams(prevProps, this.props)) {
        return;
    }
    this.props[this.constructor.reducerName](this.props.params);
}

결론

이 코드는 새로운 데이터를 수신할 경우 동일한 리액션 구성요소를 사용하는 페이지의 본문을 업데이트한다.

Route 구성 요소에서 이벤트를 변경하고 Route API를 선택한 다음 새로 고침이 필요한 하위 구성 요소에 대한 신호를 사용할 수 있음...

참조URL: https://stackoverflow.com/questions/37882821/react-router-link-to-does-not-load-new-data-when-called-from-inside-the-same-c