反应/反应本机：组件中的执行顺序

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);。

看到这里的文档（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange）

如果你想改变submittedURI你将不得不调用readystatechange回调中this.props.onURISubmit(submittedURI);功能。确保回拨具有访问this.props的正确上下文。