在第二个 fetch 请求中使用 fetch 响应答案

【问题标题】：use a fetch response in a second fetch request在第二个 fetch 请求中使用 fetch 响应
【发布时间】：2017-05-30 19:09:31
【问题描述】：

我有一个带有两个获取请求的函数。第一个获取请求返回一个包含 ACCTNO 的对象数组。我正在尝试使用返回的 ACCTNO 是第二个请求。但是我没有任何成功。我也在尝试引用 this.state.buildUrl，因为我需要 buildUrl 才能在视图中呈现，但我收到错误消息说 this.setState 不是函数或未定义。如何在第二个请求中使用第一个 fetch 响应？

  componentDidMount() {


  var url = 'http://10.0.2.2:8080/combined';
   var result = fetch(url, {
    method: 'get',
  }).then(function(response) {
    return response.json(); 
  }).then(function(data) {
    var ACCTNO =  data[0].ACCOUNT;

  var FormData = require('form-data');
    var form = new FormData();
    form.append('businessId', '123456');
    form.append('login', 'SAFConnectUser');
    form.append('password', '123445678');
    form.append('billingAccountNumber', ACCTNO);
    form.append('signOffURL', 'fd');
    form.append('timeOutURL', 'fd');

  fetch('https://collectpay-uat.princetonecom.com/otp/namevaluepair/submitSingleSignOn.do', {

      method: 'POST',

      body: form
    }).then((response) => response.text()).then((res) => {
      if (res.error) {
        console.log(res.error)
      }

      console.log(res)


      var fields = res.split('|');

      var getUrl = fields[3];
      var buildUrl = getUrl.slice(14)


      // Getting error that setState is not a function?
      this.setState({buildUrl})


    console.log(buildUrl)
    console.log(ACCTNO)  

    })

  })

}






  render() {



    return (
 <WebView
        source={{uri: this.state.buildUrl}}
        style={{marginTop: 20}}
      />

    );
  }
}

export default acidirect;

【问题讨论】：

我看到两个请求。你指的是哪一个？
你似乎做得对。我认为问题可能是您的数据数组为空。为什么不尝试打印“数据”并查看它的外观？
请正确缩进您的代码以使其更具可读性。

标签： javascript reactjs react-native fetch

【解决方案1】：

将所有函数更改为粗箭头函数，以便它们可以引用this：

class acidirect {
  componentDidMount() {
    fetch('http://10.0.2.2:8080/combined', {
      method: 'get',
    })
    .then(response => response.json())
    .then(data => {
      var ACCTNO = data[0].ACCOUNT;
      var FormData = require('form-data');
      var form = new FormData();
      form.append('businessId', '123456');
      form.append('login', 'SAFConnectUser');
      form.append('password', '123445678');
      form.append('billingAccountNumber', ACCTNO);
      form.append('signOffURL', 'fd');
      form.append('timeOutURL', 'fd');

      fetch('https://collectpay-uat.princetonecom.com/otp/namevaluepair/submitSingleSignOn.do', {
        method: 'POST',
        body: form
      })
      .then(response => response.text())
      .then(res => {
        var fields = res.split('|');
        var getUrl = fields[3];
        var buildUrl = getUrl.slice(14);
        this.setState({buildUrl});
      });
    });
  }

  render() {
    return (
      <WebView
        source={{uri: this.state.buildUrl}}
        style={{marginTop: 20}}
      />
    );
  }
}

export default acidirect;

【讨论】：

我收到一个错误：更新由 RTCWebView 管理的视图的属性“源”时出错
暂时移除 WebView。只需集中精力，您可以使用第一次的数据进行第二次提取，并且在第二次完成后您可以setState。
当我console.log(this.state.buildUrl) 我得到未定义
不要在console.log 后面紧跟this.setState({buildUrl});，因为那里还没有。渲染一个<Text>{this.state. buildUrl}</Text>，这样你就可以看到状态。如果您甚至获得了buildUrl 的值，也请尝试console.log 这部分var buildUrl = getUrl.slice(14); :)

【解决方案2】：

您可以将您的响应从第一次获取状态设置为

 fetch('/url',{credentials: 'same-origin'}).then(function(response) {
    return response.json();
}).then(this.setSomeState);

现在设置你的状态

 setSomeState: function(response) {

    this.setState({
        array: response
    });
  },

现在您可以在任何地方使用

  this.state.array

【讨论】：