React/React Native: Порядок выполнения в компоненте

Question

Я не могу определить последовательность выполнения кода в реакции native. Следующие кодовые журналы 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 вы собираетесь должны вызвать функцию this.props.onURISubmit(submittedURI); в readystatechange обратного вызова. Убедитесь, что обратный вызов имеет подходящий контекст для доступа к this.props.