2

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

我正在尝试将 api 响应呈现为 a<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...

4

1 回答 1

2

我看了你的 codepen，但我没有问题让它工作。
需要进行两项更改才能使其正常工作：

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

它渲染得很好，与国家。

这是已编辑 codepen 的链接。（希望这个链接有效）

于 2016-04-18T16:48:35.963 回答