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 没有问题，例如但如果它是一个更深的对象，它会说 "Uncaught TypeError: Cannot read property 'country' of undefined" ...

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

有人知道吗？

代码笔也在这里：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)
          },

但这有点老套...

Answer 1

我看过你的代码笔，但我没有遇到任何问题。
进行了两次更改才能使其正常工作：

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

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

这里是link to edited codepen。（希望这个 link 有效）

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

ReactJS: can't render api response into h2 tag but can log it to console

javascript

json

reactjs

openweathermap