javascript - 如何在 react 中进行双json外部调用

Question

我需要帮助。我正在构建一个小型 React Web 应用程序，它应该列出不同的 json 调用。第一个应该要求列表。对于每个条目，应该有第二个 json 调用，它提供有关每个条目的特定信息。我想将其作为 div 中的列表返回。

这是我到目前为止的代码。当前代码有效，但我无法进行第二次调用。无论我尝试什么都行不通。

谢谢。

var Dashboard = React.createClass({
getInitialState: function(){
    return {
        coinListJson: "json/coinlist.json",
        coinList: [],
        coinInfo: []
    }
},
componentDidMount: function() {

    var th = this;
    this.serverRequest = 
      axios.get(this.state.coinListJson)
        .then(function(result) {
            th.setState({
                coinList: result.data.coins
            })      
        })
  },

render: function(){
    return (
        <ul>
            {this.state.coinList.map(function(val, index){

                return (
                    <li key={ index }>{val.id}</li>
                );

              })}
        </ul>
    )   
  }
});

React.render(
  <Dashboard/>,
  document.getElementById('dashboard')
);

我试过这样的:

render: function(){
    return (
        <ul>
            {this.state.coinList.map(function(val, index){



                    var th = this;
                    var url = "https://api.coinmarketcap.com/v1/ticker/"+val.id+"/?convert=EUR";
                    this.serverRequest = 
                    axios.get(url)
                        .then(function(result) {
                            return (                     
                              <li key={ index }>{val.id}{result.data.coins[0].price_btc}</li>
                            );


                        })


              })}
        </ul>
    )   
  }

Answer 1

我相信您需要以如下方式将您的第二次调用(调用)移动到 componentDidMount:

componentDidMount: function() {
  var th = this;
  var coins; 
  axios.get(this.state.coinListJson)
    .then(function(result) {
       coins = result.data.coins;
       return Promise.all(coins.map(function(val){
         var url = "https://api.coinmarketcap.com/v1/ticker/"+val.id+"/?convert=EUR";
         return axios.get(url);
       });
     })
     .then(function(result) {
        // process the result, change state accordingly
        th.setState({
            coinList: coins
            // subResult: result
        }) 
      });
}