서버 측에서 이미 사용할 수있는 경우 componentDidMount가 데이터를 가져 오지 못하도록합니다.

Question

구성 요소가 마운트 될 때 ComponentDidMount()가 트리거됩니다 (서버 쪽 렌더링 후 수화 될 때 포함).

온라인에서 찾은 해결책 중 하나는 상태에 데이터가 있는지 여부를 확인하는 것입니다. 그러나 이것은 모든 구성 요소에 많은 코드를 포함해야합니다. 다른 솔루션은 무엇입니까?

componentDidMount() { 
    // if rendered initially, we already have data from the server 
    // but when navigated to in the client, we need to fetch 
    if (!this.state.data) { 
     this.constructor.fetchData(this.props.match).then(data => { 
     this.setState({ data }) 
     }) 
    } 
    } 

Answer 1

대체 솔루션을 발견했습니다. Redux 상점에서 현재 페이지의 URL을 유지합니다. 따라서 탐색에서 다음을 수행 할 수 있습니다.

componentDidMount() { 
    const { url, match } = this.props; 
    if (url !== match.url) { 
    fetchData(match.path); 
    } 
}