React-native：无法处理的获取响应

Question

仍在学习 RN...我正在尝试在 之前在 react-native 中使用 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_key放在我的数据库中，我可以看到放对了。

问题出在 React-native 部分：浏览器打开 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();
}

React-native：无法处理的获取响应

React-native : response of fetch impossible to treat

ajax

state

fetch

setstate

react-native