네이티브 반작용 : 주도 시뮬레이터에 다시로드 한 후 이전 상태를 유지하는 것

Question

나는이 같은 일을 수행하는 코드가 있습니다 (의사 코드)

class extends Component{ 
    constructor(){ 
     this.state={ 
     condition1 : false, 
     condition2 : false, 
     condition3 : false, 
     condition4 : false, 
     } 
     //set all 4 condition states to true once data loading has completed from the store 
    } 


    render(){ 

     return(
     if (this.state.condition1 && this.state.condition2 && this.state.condition3 && this.state.condition4) 
      Render Main component 
     else 
      Render loading screen 

    ); 

} 



} 

은 기본적으로 내가 여부를 확인하는 데 사용되는 4 개 상태를 가질를 데이터는 주 구성 요소를로드하기 전에로드되었습니다. 저장소 (다른 파일에서) 데이터로드가 완료되면 이벤트가 발생하여 4 개 상태가 true로 설정되고 주 구성 요소가로드됩니다. 그러나 일단 다시로드 버튼을 Genymotion 에뮬레이터에서 실행하면 4 개 상태가 true로 유지되고 false로 재설정되지 않으므로 응용 프로그램이 주 구성 요소를로드하고 충돌합니다. 데이터가 아직 준비되지 않았으므로 모든 4 개 상태를 false로 재설정하려고했습니다. 다시 ComponentWillMount 메소드에서 주 앱이 주 구성 요소를로드하려고 시도하기 전에 상태가 false로 다시 설정되지 않는 것처럼 보입니다. 라이프 사이클의 어느 구성 요소에서 상태를 거짓으로 재설정해야합니까? 또는 실제 장치에서 응용 프로그램을 다시로드하는 것이 "비현실적"이므로이 문제를 무시해야합니까?

Answer 1

라이프 사이클의 어느 구성 요소를 상태를 false로 재설정해야합니까?

렌더링하기 전에 상태를 업데이트하려면 componentWillReceiveProps을 사용하는 것이 좋습니다. 내 프로젝트를 위해이 작업을 수행했는데 제대로 작동하지만 사용 사례에 따라 newProps이 this.props과 다른지 확인해야 할 수도 있습니다.

https://facebook.github.io/react/docs/component-specs.html

componentWillReceiveProps

컴포넌트가 새로운 소품 수신 될 때 호출. 이 메서드는 초기 렌더링을 위해 호출 된 이 아닙니다.

this.setState()를 사용하여 상태를 업데이트하여 render()가 호출되기 전에 이것을 프롭 전환에 반응 할 수있는 기회로 사용하십시오. 오래된 소품은 this.props를 통해 액세스 할 수 있습니다. this.setState() 을이 함수 내에서 호출하면 추가 렌더링이 트리거되지 않습니다.

Answer 2

네트워크 피치 요청 수를 줄임으로써이 문제를 해결할 수있었습니다. 동시에 여러 네트워크 요청을하는 것이 이유가 불분명하더라도 불안정성을 유발할 수 있습니다.