无法读取json对象的反应

Question

我正在尝试创建一个从apis读取的json webapp并将结果打印到列表中。

问题是我无法在渲染上读取完整的json对象。

console.log(this.state.coinInfo);

coinInfo是一个json对象，如下所示：

 quantstamp: {id: "quantstamp", name: "Quantstamp", symbol: "QSP", rank: "107", price_usd: "0.446127", …},   
 vechain: {id: "vechain", name: "VeChain", symbol: "VEN", rank: "30", price_usd: "5.80186", …}

写作：

 this.state.coinInfo["vechain"] works, but
 this.state.coinInfo["vechain"].id says undefined.

我很想将coinInfo信息放入渲染中的

元素。

以下是完整代码：

var Dashboard = React.createClass({
  getInitialState: function() {
    return {
      coinListJson: "json/coinlist.json",
      coinList: [],
      coinInfo: {}
    }
  },
  createDashboard: function(event) {},
  componentDidMount: function() {
    // Is there a React-y way to avoid rebinding `this`? fat arrow?
    var th = this;
    var coinListBuffer;
    var coinInfoBuffer = {};
    this.serverRequest = axios.get(this.state.coinListJson).then(function(result) {

      coinListBuffer = result.data.coins;
      th.setState({
        coinList: result.data.coins
      })

    }).then(function() {

      //alert("geht "+coinListBuffer[1].id);
      coinListBuffer.map(function(val, index) {
        var url = "https://api.coinmarketcap.com/v1/ticker/" + val.id + "/?convert=EUR";
        th.serverRequest = axios.get(url).then(function(result) {

          coinInfoBuffer[val.id] = result.data;
          console.log(result.data[0]);
          var coinInfoBufferString = coinInfoBuffer;
          th.setState({
            coinInfo: coinInfoBufferString
          })
        })
      })
    })
  },
  render: function() {
    var th = this;
    console.log(this.state.coinInfo);
    return (
      <ul> 
      {
        this.state.coinList.map(function(val, index) {
          return ( 
          <li key={index}> 
            {val.id} 
          </li>);
          })
      } 
      </ul>
    )
  }
});