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);が呼び出されます。

あなたがsubmittedURIを変更したい場合は、readystatechangeコールバック内this.props.onURISubmit(submittedURI);関数を呼び出す必要があるとしている

（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange）こちらのドキュメントを参照してください。コールバックにthis.propsにアクセスするための適切なコンテキストがあることを確認してください。