Question

我需要帮助。我正在构建一个小的反应webapp，它应该列出不同的json调用列表。第一个应该要求列表。 Foreach入口应该有第二个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
        }) 
      });
}

如何在反应中进行双json外部调用

1 个答案: