이유 (! nextProps.data.loading && this.props.data.loading)

Question

react-apollo 및 react-router-redux으로 반응하는 앱에서 새로운 경로로 전달할 때마다 새 쿼리 매개 변수가 새 GraphQL 쿼리를 트리거합니다 . 쿼리를 수행 한 후 종종 콜백이 필요했습니다.

구성 요소가 종료되지 않고 다시 렌더링하기 때문에 componentDidMount에서 그 작업을 수행 할 수 없습니다. 그것은 완벽하게 작동하지만 난 정말 왜 이해가 안

componentWillRecieveProps(nextProps){ 
    if (!nextProps.data.loading && this.props.data.loading) { 
    doMyCallBack(); 
    } 
} 

:

그래서 내가 사용하는이 솔루션을 here 발견했다.

nextProps.data.loading: true 
this.props.data.loading: false 

2) 두 변수가 true 어떤 상황에서 : 링크를 클릭하면

1) : 내가 발견 한 내용으로, componentWillReceiveProps는 새로운 경로로 파견에 3 번 트리거됩니다?

nextProps.data.loading: true 
this.props.data.loading: true 

3) 여기가 콜백입니다. 그러나 데이터가 아직로드 중입니까 ??

nextProps.data.loading: false 
this.props.data.loading: true 

구성 요소가 다른 작업에서 새로운 소품을받을 완전히 의미가 있습니다 아폴로 쿼리, 트리거하지 않을 때 마지막 하나가 발생합니다

nextProps.data.loading: false 
this.props.data.loading: false 

내가 무슨 일이 일어나고 있는지 알아낼 수 없습니다를 1, 2 및 3 단계에서 사용하십시오.

Answer 1

구성 요소는 상위 구성 요소/저장소에서 loading 소품을 받고 구성 요소에 해당 소품이 적용되기 바로 전에 componentWillRecieveProps이 발생합니다. 그래서 수집 것과 :

1. loading은 저장소에 true로 설정하고, 저장소가 시작로드 구성 요소를 말하고있다 - 그것은이 모두 true로 설정되어

2. 구성 요소에 여전히 false의

3. loading은 저장소에 false로 설정되어, 가게는 로딩이 완료 구성 요소를 말하고있다

4. 은 인해 업데이트되는 다른 소품에

1 및 3 성분과 (2, 4)가 발사되는 상기 저장소로부터 loading 법안을 통과 소성되어 모두 false 설정있다. (로딩과 관련 없음)