ReactJS JSON APIデータを取得する - 正しい方法ですか？

Question

私はES6を試してみたいと思います。すべての3つのサイトのAPIエンドポイントは、私が欲しいの価格に直行

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

：私は3つの以下のWebサイトのいずれかからビットコインのためのJSONのAPIデータを呼び出したいですこれが問題かもしれないと私は思う。データの配列はなく、特定の価格だけです。上記の＃3を使用している私の例では、唯一のオブジェクトは "USD"です。つまり、ReactJSを使用して達成したより多くのデータとデータの配列を持つAPIを使用するプロセスを過ちしていると思います。

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を使って正しい道を見つけるのは難しいです。また、私は "フェッチ"がまだグローバルにサポートされていないと読んだので、APIデータを "取得"するために "axios"を使用していますか？これは2017年のケースではまだですか？上記の方法を使用して

、私はインスペクタでこれを見ることができます：

をしかし、私はインスペクタの「コンソール」の部分にオーバー行くとき、私はそれを聞いています「this.state .USD.mapは関数ではありません "。

私はこの作業を解決するための最善のような気がしますが、私は約束のマッピングに何か問題があると思います。

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

が反復可能ではないオブジェクトをSETINGさ：

Answer 1

問題があることです。つまり、this.state.USD.map is not a functionはUSDが配列でないことを意味します（コンソールでこれを見ることができます）。

は何が起こるかを見るために、これを試してみてください：

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

あなたが書いたしかし、カントー：

のデータのない配列、単に特定の価格がありません。

、私は最善の解決策だけでrenderメソッドと初期状態を変更することであると思う：

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


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