javascript - 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没问题，例如但如果它是一个更深的对象，它会说“未捕获的类型错误:无法读取未定义的属性‘国家’”……

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

有人知道吗？

代码笔也在这里: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

我看过你的代码笔，但我没有遇到任何问题让它工作。
进行了两处更改以使其工作:

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

而且它渲染得很好，带有国家/地区。

这是一个link to edited codepen .(希望这个链接有效)