2

コードペンの反応で発生する別の奇妙なエラー。

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は問題ありません。たとえば、オブジェクトが 1 つ深い場合、「Uncaught TypeError: Undefined のプロパティ 'country' を読み取ることができません」と表示されます ...

しかし、これとまったく同じプロパティをコンソールに記録できます。

誰でもアイデアはありますか？

コードペンもここにあります：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)
          },

しかし、これは少しハックです...

4

1 に答える 1

2

私はあなたのコードペンを見ましたが、それを機能させるのに問題はありませんでした.
機能させるには、次の 2 つの変更が必要でした。

  • setState()(Ajax 呼び出し内) を include に変更しdata: dataました。完全な (への参照) データ オブジェクトを確実に状態にするため。
  • レンダリングコードを含めるように変更しましたthis.state.data.sys.country

そして、それは国でうまくレンダリングされます。

編集された codepen へのリンクは次のとおりです。（このリンクが機能することを願っています）

于 2016-04-18T16:48:35.963 に答える