javascript - ReactJS:无法将 api 响应渲染到 h2 标签中，但可以将其记录到控制台

Question

我在 codepen 上的 React 中遇到了另一个奇怪的错误。

我正在尝试将 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没问题，例如但如果它是更深的一个对象，它会显示“Uncaught TypeError:无法读取未定义的属性‘国家’”...

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

有人有想法吗？

这里还有代码笔: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 。 (希望这个链接有效)