Uncaugt TypeError beim Zugriff auf JSON-Daten mit react.js

Question

Diese Frage bezieht sich auf APIs, JSON-formatierte Daten und React.js.

Ich bin versucht, auf Daten zuzugreifen aus einer API, für die die Ausgabe ein JSON-Array, das in folgendem Format ist:

{ 
    "success":true, 
    "timestamp":1479498608, 
    "source":"USD", 
    "quotes":{ 
    "USDUSD":1, 
    "USDJPY":110.644997, 
    "USDCAD":1.351041, 
    "USDRUB":64.628403, 
    "USDCNY":6.879204, 
    "USDMXN":20.623699 
    } 
} 

Jetzt ist der Teil, den ich wirklich interessiert bin, ist die „Zitate "Werte für verschiedene Währungspaare.

So eine react.js-Klasse:

var TickerTrader = React.createClass({ 
    getInitialState: function() { 
    return{}; 
    }, 
    componentDidMount: function() { 
    var component = this; 
    $.get("http://apilayer.net/api/live?access_key=4a368d8077807c97b3aff9415a4d4995&currencies=USD,JPY,CAD,RUB,CNY,MXN&format=1", function(data) { 
     component.setState(data); 
    }); 
    }, 
    render: function() { 
    return (
     <div>USD/JPY: {this.state.quotes.USDJPY}</div> 
    ); 
    } 
}); 

Doch dies scheint nicht zu funktionieren. Ich habe mich gefragt, ob ich auf den Wert des USDJPY zugreifen möchte, wie würde ich das tun?

Answer 1

Das Problem ist nicht so sehr, dass der API-Aufruf nicht den Status aktualisiert, es ist, dass auf Ihrer ursprünglichen Last quotes nicht definiert ist, was zu einem Fehler führt. Dies ist eigentlich Javascript bezogen, nicht reagieren.

render: function() { 
    // on initial load quotes will be undefined 
    return (
    <div>USD/JPY: {this.state.quotes ? this.state.quotes.USDJPY : null}</div> 
); 
} 

Umgekehrt könnten Sie das ursprüngliche Schema in den Status laden.

getInitialState: function() { 
    return { 
    quotes: {} 
    }; 
}, 

Javascript scheint mit der Rückkehr eine undefined in Ordnung zu sein, wenn die Eigenschaft nicht vorhanden ist, aber es wird eine Ausnahme ausgelöst, wenn das Objekt, das Sie die Eigenschaft zugreifst von nicht definiert ist.

let foo = {} 
foo.test 
// undefined 
foo.test.fail 
// Uncaugt TypeError: Cannot read property 'fail' of undefined