Question

此问题涉及API，JSON格式的数据和React.js。

我正在尝试从输出为JSON数组的API访问数据，其格式如下：

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

但是，这似乎不起作用。我想知道，如果我想访问与USDJPY相对应的值，我将如何进行此操作？

Answer 1

问题不是因为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: {}
  };
},

当属性不存在时返回undefined，Javascript似乎没问题，但是当您访问该属性的对象未定义时，它会引发异常。

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

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

1 个答案: