Проблема при получении данных с веб-сайта и переключении экрана на React Native

Question

Итак, я пытался получить некий тип входа в React Native, который фактически извлекает данные с реального веб-сайта, но у меня возникает эта проблема, когда я хочу переключиться с экрана на другой, потому что он не меняется на другой экран:

    responseFromWeb = () => { 
        var xhttp = new XMLHttpRequest();
        var response;

        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {        
            alert(xhttp.responseText);
            this.setState({ info: xhttp.responseText });
            this.props.navigation.navigate('Profile', { info: this.state.info }) 
          }
        };
        xhttp.open(
          'GET',
          'http://dcc.000webhostapp.com/2020a/datosudeg.php?codigo=' +
            this.state.codigo +
            '&nip=' +
            this.state.nip,
          true
        );
        xhttp.send();

        this.setState({ codigo: '', nip: '' });   

      };

Теперь я знаю, что в этой ситуации те 'this' под предупреждением не получают доступ к свойств класса , и они получают доступ к свойствам xhttp var, и я действительно не знаю, как получить доступ к свойствам class вместо xhttps

Я попытался создать другую функцию, которая сначала вызывает responseFromWeb () , а затем переходит на другой экран, но он загружает экран профиля, прежде чем я получаю ответ в Интернете, и мне нужно использовать эта информация в текстовом компоненте с самого начала экрана профиля. Я что-то делаю ужасно неправильно?

Answer 1

Я знаю, что в этой ситуации те, кто находятся под предупреждением, не получают доступ к свойствам класса, а получают доступ к свойствам xhttp var, и я действительно не знаю, как получить доступ к классу. свойства вместо xhttps

Вы можете использовать функции стрелок, чтобы не затенять внешние this, например

 xhttp.onreadystatechange = () => {
      // xhttp refers to xhttp
      if (xhttp.readyState == 4 && xhttp.status == 200) {        
        alert(xhttp.responseText);
        // this refers to a component
        this.setState({ info: xhttp.responseText });
        this.props.navigation.navigate('Profile', { info: this.state.info }) 
      }
    };

Но на самом деле нет причин использовать устаревшие XMLHttpRequest, используйте fetch в сочетании с обещаниями или асинхронностью / ожиданием для более чистого синтаксиса вместо