Question

我正在使用AJAX获取一些JSON，然后我想显示该值。如果我注销了包含我想要显示的值的对象，我可以看到键和值。但是，当我尝试直接访问该值时，我得到了未定义。

这是我坚持使用的组件：

var WeatherCard = React.createClass({
  getInitialState: function () {
    return {};
  },
  componentDidMount: function() {
    var comp = this;
    $.get("http://api.openweathermap.org/data/2.5/weather?zip=" +  this.props.zipcode + ",us", function(data) {
    comp.setState(data);
  });
 },
 render: function() {
    // I want to get the value @ this.state.main.temp

    // this works...
    console.log(this.state.main);

    // this does not work...
    // console.log(this.state.main.temp);

    // I want "current temp" to display this.state.main.temp
    return (
        <div className="well">
          <h3>{this.state.name}</h3>
          <p>Current Temp: {this.state.main} </p>
          <p>Zipcode: {this.props.zipcode}</p>
        </div>
     );
    }
});

这是整个插件 http://plnkr.co/edit/oo0RgYOzvitDiEw5UuS8?p=info

Answer 1

第一次传递时，this.state为空，将this.state.main.temp呈现为未定义。要么使用正确的结构化对象预填充状态，要么将其包装在if子句中。

对于返回null或未定义的对象，React将跳过呈现它而没有任何警告或错误，但是当您使用返回null或未定义的嵌套结构时，将采用正常的JavaScript行为。

Answer 2

尝试使用main：[]，data：[]设置初始状态，而不是空对象。

我遇到了同样的问题，一旦我拿到了我的AJAX setState并且做了一个空的初始状态，一切都开始正常工作。

我是React的新手所以我不能给你一个很好的解释，为什么这会产生影响。我似乎偶然发现了各种奇怪的问题。

希望这会有所帮助。

无法在React对象状态上访问对象属性，即使它存在。返回undefined

2 个答案: