javascript - 深入研究 Reactjs 应用程序组件渲染中的状态

Question

我无法引用处于传递给子组件状态的对象和数组的元素。

当我无法在某些子组件中引用它们时，我无法清楚地识别这些情况之间的差异。

我想念什么？

组件的示例属性在组件下给出。发表了评论。例如，我无法引用 current.main.temp 或 current.weather[0]。 它会给出 undefined 错误:

    var Current = React.createClass({
  render: function () {
    var current = this.props.current;
    var dateArray = new Date(current.dt * 1000).toDateString().split(" ");
    console.log("datearray: ", dateArray[0]);
    var main = current.main;
    console.log(main);
    return (
      <div style={{float: "left", clear:"left"}}>
        <div style={{float: "left"}}>
          <div>{dateArray[0]}</div>
          <div>{dateArray[1]} {dateArray[2]}</div>
          <div>{dateArray[3]}</div>
        </div>
        <div style={{float: "left"}}>
          <div>current: {JSON.stringify(current)}</div>
        </div>
        <div style={{float: "left", clear: "right"}}>
          <div>{JSON.stringify(current.weather)}</div>
        </div>
      </div>
    );
  },
});
    // {"coord":{"lon":32.85,"lat":39.92},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"base":"cmc stations","main":{"temp":28,"pressure":1018,"humidity":34,"temp_min":28,"temp_max":28},"wind":{"speed":2.1},"clouds":{"all":20},"dt":1442483400,"sys":{"type":1,"id":6022,"message":0.0026,"country":"TR","sunrise":1442460682,"sunset":1442505249},"id":323786,"name":"Ankara","cod":200}

但是，我可以引用例如 current.main.temp 或 current.weather[0]:

var Hour = React.createClass({
  render: function () {
    var hour = this.props.hour; // is an object.
    return (
      <div style={{float: "left"}}>
        <div>{hour.weather[0].main}</div>
        <div>{hour.weather[0].description}</div>
        <div><img src={"http://openweathermap.org/img/w/"+hour.weather[0].icon+".png"} /></div>
        <div>{hour.main.temp}</div>
        <div>{hour.main.temp_min}</div>
        <div>{hour.main.temp_max}</div>
        <div>{hour.main.humidity}</div>
        <div>{new Date(hour.dt * 1000).getHours()} o,clock</div>
      </div>
    );
  }
});
// {"dt":1442437200,"main":{"temp":16.39,"temp_min":14.78,"temp_max":16.39,"pressure":914.76,"sea_level":1026.82,"grnd_level":914.76,"humidity":67,"temp_kf":1.62},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":1.41,"deg":308.503},"sys":{"pod":"n"},"dt_txt":"2015-09-16 21:00:00"}

Answer 1

这是因为你的数据结构。

您的天气数据中没有任何名为 data 的属性，因此 current.data.dt 和 current.data.main 为未定义。