ReactJS holen JSON API-Daten - Der richtige Weg?

Question

Ich habe mit ES6 kämpfen versucht, was zu tun ist, eine ziemlich einfache Operation. Ich möchte von einem der drei folgenden Websites JSON API-Daten für Bitcoin nennen:

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

Alle drei Standorte API Endpunkte gehen Sie direkt zum Preis, den ich will und ich denke, das könnte das Problem sein. Es gibt kein Array von Daten, nur den spezifischen Preis. In meinem Beispiel unter Verwendung von # 3 ist das einzige Objekt "USD". Davon abgesehen denke ich, dass ich den Prozess überbewerte, weil ich in APIs mit viel mehr Daten und Datenfeldern komme - das habe ich mit ReactJS geschafft.

Beim Versuch, einen einzelnen Endpunkt zu erreichen, der im "React DOM Inspector" als "USD" angezeigt wird und den korrekten Preis einnimmt, kann ich den Preis nicht auf der Seite rendern, obwohl ReactJS dies sieht es und es gefangen nehmen.

Mein Code:

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")); 

ich erwähnen, dass ich eine Menge Forschung in das getan haben und haben eine Menge Antworten gefunden - alle verschieden! Jeder weiß, dass die ReactJS-Dokumente stark veraltet sind, daher ist es schwierig, den richtigen Pfad mit ReactJS zu finden. Außerdem verwende ich "axios", um die API-Daten zu "holen", da ich gelesen habe, dass "fetch" noch nicht global unterstützt wird? Ist das 2017 noch so?

das obige Verfahren verwenden, kann ich dies im Inspektor sehen:

Aber wenn ich an die „Console“ Teil des Inspektors gehen, ich sagte, dass „this.state .USD.map ist keine Funktion ".

Ich habe das Gefühl, dass ich gleich an der Schwelle zur Lösung dieser Aufgabe stehe, aber ich denke, dass ich mit der Abbildung des Versprechens etwas falsch mache.

Answer 1

das Problem ist, dass:

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

nicht iterable Objekt seting. Ich meine, dass this.state.USD.map is not a function bedeutet, dass USD kein Array ist (und Sie können dies in der Konsole sehen).

dies versuchen, um zu sehen, was passiert:

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

jedoch tho, Sie schrieb:

Es gibt keine Anordnung von Daten ist nur der spezifische Preis.

dann denke ich, die beste Lösung, die nur Render-Methode und Ausgangszustand zu ändern ist:

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


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