Question

我正在尝试进行API调用，该调用具有参数状态，该调用由另一个调用设置：

我将在下面解释我的代码！

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  constructor(props) {
  super(props);

  this.state = {
     coinList: [],
     coinInfos: []
  };
}

componentDidMount() {

  // FIRST CALL HERE: I get a list of every coin

  axios.get('https://min-api.cryptocompare.com/data/all/coinlist')
  .then(res => {
     const coins = res.data;
     console.log(coins);
     this.setState({ coinList: coins.Data });
  });


  // SECOND CALL HERE: I want to get the price of every coin of the previous list


  if (this.state.coinList == null) {
     return null;
  }
  else {
     axios.get('https://min-api.cryptocompare.com/data/pricemultifull?fsyms=' + this.state.coinList + '&tsyms=USD')
  .then(response => {
     const coinCap = response.data;
     this.setState({ coinInfos: coinCap.RAW });
  });

}


render() {

  return(

     <div className="App">


        {Object.keys(this.state.coinInfos).map((key) => (
              <div className="container">
                 <span className="left">{key}</span>
                 <span className="right">{this.state.coinInfos[key].USD.MKTCAP}</span>
              </div>
           ))}
     </div>
  );
}
}

我使用if条件进行第二次调用，因为this.state.coinList返回2个空数组和1个数组，其中包含数据（我不知道为什么有2个空数组由方式）。

此代码适用于第一次调用，但不适用于第二次调用。我是React的初学者，所以我查看了doc，我认为问题是第一个调用在第二次调用之前没有呈现，所以this.state.coinList为空。

你可以告诉我，我错了吗？如果我是真的，我应该在哪里进行第二次API调用？

我希望我能说清楚，谢谢你的时间！

以下是API的文档，如果您需要：https://www.cryptocompare.com/api/#-api-data-

Answer 1

来电是同步。你甚至在第一个电话完成之前就接到了第二个电话。作为最简单的解决方案，我建议将第二次调用放在第一次调用的then回调函数中。

在那里，您将获得第一次通话的响应数据，然后您可以使用它并将其传递给第二次通话。

componentDidMount() {

  // FIRST CALL HERE: I get a list of every coin

  axios.get('https://min-api.cryptocompare.com/data/all/coinlist')
  .then(res => {
     const coins = res.data;
     console.log(coins);
     this.setState({ coinList: coins.Data });

     // SECOND CALL HERE: I want to get the price of every coin of the previous list


     if (this.state.coinList == null) {
       return null;
     }
     else {
       axios.get('https://min-api.cryptocompare.com/data/pricemultifull?fsyms=' + this.state.coinList + '&tsyms=USD')
     .then(response => {
        const coinCap = response.data;
        this.setState({ coinInfos: coinCap.RAW });
     });
   });

}

Answer 2

您正在为要同步执行的操作进行异步调用。然后第一个答案是正确的，但我更喜欢使用async / await

s=df2.merge(df1,on='Name',how='outer')
s.set_index(['Name','Color','Shape']).Value.unstack(-1,fill_value=0).stack().reset_index().sort_values(['Shape','Name'])
Out[263]: 
     Name  Color     Shape  0
0   Frank    Red    Circle  0
3    John  Green    Circle  0
6   Sarah    Red    Circle  1
9     Tom   Blue    Circle  4
1   Frank    Red    Square  0
4    John  Green    Square  2
7   Sarah    Red    Square  0
10    Tom   Blue    Square  4
2   Frank    Red  Triangle  7
5    John  Green  Triangle  0
8   Sarah    Red  Triangle  0
11    Tom   Blue  Triangle  0

将API调用的响应作为另一个API调用的参数传递

2 个答案: