Реактивно-родной: ответ на выборку невозможно лечить

Question

Все еще учусь на RN... Я пытаюсь использовать fetch() в реакции-родной, чтобы получить конкретные данные с моего сервера, прежде чем открывать веб-страницу в браузере смартфона. Вот что я написал:

openLink = () => {       //Communicate to the server to get an unique key_id
  this.state = {urlKey: 'text'}; //Initial state


  var params = {
      // Some params send by POST to authenticate the request...
  };

  var formData = new FormData();

  for (var k in params) {
      formData.append(k, params[k]);
  }
      fetch(Constants.URL.root+"mobile/authorize_view", {
                method: 'POST',
                headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'multipart/form-data',
               },
                body: formData
              })
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({urlKey:responseJson.document_key}); //Getting the response, and changing the initial state (was 'text' previously)
          })
          .done();

  var urlString = Constants.URL.upload + '/' + this.state.urlKey; // !!Problem : opening in browser with this.state.urlKey = text, and not document_key!!
  Linking.canOpenURL(urlString).then(supported => {
    if (supported) {
      Linking.openURL(urlString);
    } else {
      console.log('Don\'t know how to open URI: ' + this.props.url);
    }
  });
}

На самом деле, как вы можете видеть, я запрашиваю определенный ключ к моему серверу (urlKey, который возвращается в объекте JSON: responseJson.document_key).

Все хорошо работает на стороне сервера, потому что я поместил этот сгенерированный ключ document_ в свою базу данных, и я вижу, что он помещен правильно.

Проблема в родной части React: браузер открывает веб-страницу с this.state.urlKey как **text** что является начальным состоянием, что функция fetch должен был превратиться в document_key, отправленный сервером... Что мне не хватает?

Answer 1

Оператор выборки является асинхронным. Это означает, что когда вы вызываете fetch, следующая строка выполнения не обязательна. .then но это var urlString = Constants.URL.upload + '/' + this.state.urlKey;

Обратите внимание на этом этапе, если .then не завершено получение данных вашего this.state.document_key не будут заселены. Следовательно, почему вы видите ошибку

Вместо этого переместите этот код в финал then например:

openLink = () => {       //Communicate to the server to get an unique key_id
  this.state = {urlKey: 'text'}; //Initial state


  var params = {
      // Some params send by POST to authenticate the request...
  };

  var formData = new FormData();

  for (var k in params) {
      formData.append(k, params[k]);
  }
      fetch(Constants.URL.root+"mobile/authorize_view", {
                method: 'POST',
                headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'multipart/form-data',
               },
                body: formData
              })
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({urlKey:responseJson.document_key}); //Getting the response, and changing the initial state (was 'text' previously)
              //moved inside then
              var urlString = Constants.URL.upload + '/' + this.state.urlKey; // !!Problem : opening in browser with this.state.urlKey = text, and not document_key!!
              Linking.canOpenURL(urlString).then(supported => {
                if (supported) {
                  Linking.openURL(urlString);
                } else {
                  console.log('Don\'t know how to open URI: ' + this.props.url);
                }
              });
          })
          .done();
}