Uncaugt TypeError使用react.js访问JSON数据

此问题涉及API，JSON格式的数据和React.js。Uncaugt TypeError使用react.js访问JSON数据

我试图从一个API，它的输出是一个JSON阵列，这在下面的格式访问数据：

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

现在，我真正感兴趣的部分是“行情“各种货币对的价值。

所以，使用react.js类：

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

然而，这似乎并没有工作。我想知道，如果我想访问对应于美元兑日元的价值，我将如何去做这件事？

来源

2016-11-18 Michael Roberts

问题不在于API调用没有更新状态，而是因为初始加载quotes时未定义，导致错误。这实际上是与Javascript相关的，而不是React。

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

相反，您可以在状态中加载初始模式。

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

的Javascript似乎是确定与返回一个undefined当属性不存在，但它会提高，当对象你从访问属性的例外是不确定的。

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

来源

2016-11-18 21:20:03

完美工作。如果react.js文档解释了如何访问嵌套数组，将会有所帮助。除非我错了...... –

好'引号'是一个对象，而不是一个数组...而这个问题实际上是Javascript，而不是React :) –

更新了答案和更多信息 –

Uncaugt TypeError使用react.js访问JSON数据

回答

相关问题