ReactJS：无法将 api 响应呈现到 h2 标记中，但可以将其记录到控制台

Question

我在对 codepen 做出反应时遇到的另一个奇怪错误。

我正在尝试将 api 响应呈现为 <h2>，但不知何故我无法呈现每个属性。

  render: function () {
    return (
      <div className="weather-card">
        <h1>Weather For:</h1>
        <h2>{this.state.data.name}, {this.state.data.sys.country}</h2>
        <h2>{this.state.data.main.temp}</h2>
        <h2>{this.state.data.weather[0].main}</h2>
      </div>
    )
  }

仅渲染this.state.data.name 没有问题，例如但如果它是一个更深的对象，它会显示“未捕获的类型错误：无法读取未定义的属性‘国家’”...

但我可以将这个完全相同的属性记录到控制台。

任何人的想法？

这里还有codepen：http://codepen.io/rasmus/pen/aNGRJm

编辑：我通过将不同的属性分配为它们自己的状态属性来使其工作，如下所示：

success: (data) => {
            self.setState({
              city: data.name,
              temp: data.main.temp,
              weather: data.weather[0].main,
              isLoading: false
            });
            console.log(self.state.data.main.temp)
          },

但这有点hacky...

Answer 1

我查看了您的 codepen，但我没有遇到任何问题。
需要进行两项更改才能使其正常工作：

• 将您的setState()（在您的Ajax 调用中）更改为包含data: data。确保您获得完整（引用）数据对象的状态。
• 将您的渲染代码更改为包含this.state.data.sys.country

而且渲染效果很好，带有国家/地区。

这是link to edited codepen。 （希望此链接有效）