React/React Native : 구성 요소의 실행 순서

Question

반응 네이티브에서 코드 실행 순서를 파악할 수 없습니다. 다음 코드는 test, test 2 및 test 1입니다. submittedURI의 값을 변경하고 싶습니다.

constructor(props) { 
     super(props); 
     this.state = { 
      enterURI: '' 
     }; 
    } 

    onUriTextChanged(event) { 
     this.setState({ enterURI: event.nativeEvent.text }); 
    } 

    onSubmitPress() { 
     var submittedURI = this.state.enterURI; 
     console.log("test "+submittedURI); 

     var url = encodeURIComponent(submittedURI), data = null; 
     var xhr = new XMLHttpRequest(); 

     xhr.open("GET", "https://api.urlmeta.org/?url=" + url); 
     xhr.send(data); 
     xhr.addEventListener("readystatechange", function() { 
      if (this.readyState === this.DONE) { 
      // console.log(this.responseText); 
      var responseJSON = JSON.parse(this.responseText); 
      submittedURI = responseJSON.meta.image; 
      console.log("test 1 "+submittedURI); 
      } 
     }); 

     this.props.onURISubmit(submittedURI); 
     console.log("test 2 "+submittedURI); 
    } 

Answer 1

xhr.addEventListner("readystatechange", function() { ... })의 함수는 콜백과 수의 요청이 DONE 후했다. 따라서 요청이 완료되기 전에 console.log("test 2 "+submittedURI);이 호출됩니다. 당신이 readystatechange 콜백 내에서 this.props.onURISubmit(submittedURI); 함수를 호출해야 할 것 submittedURI을 변경하려면

여기에 워드 프로세서 ( https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange)

를 참조하십시오. 콜백에 this.props에 액세스 할 수있는 적절한 컨텍스트가 있는지 확인하십시오.