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没有问题，例如但是，如果它的一个对象更深，它会说＆＃34; Uncaught TypeError：无法读取属性＆＃39; country＆＃39;未定义＆＃34; ...

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

有人有想法吗？

这里也是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)
          },

但这有点笨拙......

Answer 1

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

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

随着国家的出现，它变得很好。

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

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

1 个答案: