React/React Native：组件中的执行顺序

Question

我无法弄清楚 react 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之后调用get。因此在请求完成之前调用console.log("test 2 "+submittedURI);。

在此处查看文档 (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange)

如果您想更改submittedURI，您将不得不在readystatechange 回调中调用this.props.onURISubmit(submittedURI); 函数。确保回调具有访问this.props 的正确上下文。