ReactJS獲取JSON API數據 - 正確的方法？

Question

我一直在努力與ES6戰鬥，應該是什麼，一個非常簡單的操作。我想從以下三個網站之一呼籲Bitcoin的JSON API數據：

1. https://cryptowat.ch
2. https://coinmarketcap.com/
3. https://www.cryptocompare.com/

所有這三個網站的API端點直奔我想要的價格我認爲這可能是問題所在。沒有任何數據陣列，只是具體的價格。在我上面使用＃3的例子中，唯一的對象是「USD」。話雖如此，我認爲我已經將這個過程推翻到擁有更多數據和數據數組的API中 - 我已經完成了使用ReactJS。

試圖將顯示爲React DOM Inspector中「狀態」的單個端點設置爲「USD」並拉動正確的價格，即使ReactJS正在查看，我也無法在頁面上呈現價格它並捕獲它。

我的代碼：

var BitcoinApp = React.createClass({ 

getInitialState: function() { 
    return { 
    "USD": [] 
    } 
}, 

componentDidMount: function() { 

    var th = this; 
    this.serverRequest = 
    axios.get(this.props.source) 
     .then(function(result) {  
     th.setState({ 
      USD: result.data.USD 
     }); 
     }) 
    }, 

componentWillUnmount: function() { 
    this.serverRequest.abort(); 
}, 

render: function() { 
    return (
    <span> 
     {this.state.USD.map(function(Data) { 
     return (
      <div key={Data.USD} className="testbtc"> 
      <p>{Data.USD}</p> 
      </div> 
     ); 
     })} 
    </span> 
) 
} 
}); 

ReactDOM.render(<BitcoinApp source="https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD&e=Coinbase" />, document.querySelector("#btcPrice")); 

我會提到，我已經做了很多的研究，這一點，並找到了很多的答案 - 所有不同！大家都知道ReactJS文檔嚴重過時，因此用ReactJS找到正確的路徑很難說。另外，我使用「axios」來「獲取」API數據，因爲我讀過「獲取」尚未全球支持？這在2017年仍然如此嗎？

使用上面的方法，我可以在檢查看到：

但是，當我去到檢查員的「控制檯」部分，有人告訴我說，「this.state .USD.map不是一個函數「。

我覺得自己正處在解決這個任務的尖端，但我認爲我在承諾的映射中出現了問題。

Answer 1

的問題是：

th.setState({ 
    USD: result.data.USD 
}); 

塞汀是不迭代的對象。我的意思是this.state.USD.map is not a function意味着USD不是一個數組（你可以在控制檯中看到這個）。

試試這個，看看會發生什麼：

th.setState({ 
    USD: [result.data.USD] 
}); 

然而壽，你寫道：

沒有陣列的數據，只是具體價格。

那麼我認爲最好的辦法是改變只是渲染方法和初始狀態：

render: function() { 
    return (
    <span> 
      <div className="testbtc"> 
      <p>{this.state.USD}</p> 
      </div> 
    </span> 
) 
} 


getInitialState: function() { 
    return { 
    "USD": "", 
    } 
},