显示来自API的json数据

Question

我正在学习ReactJs并希望显示天气数据。该API网址还给：

{ 
    "response": { 
    "version":"0.1", 
    "termsofService":"http://www.wunderground.com/weather/api/d/terms.html", 
    "features": { 
    "conditions": 1 
    } 
    } 
    ,"current_observation": { 
     "image": { 
     "url":"http://icons.wxug.com/graphics/wu2/logo_130x80.png", 
     "title":"Weather Underground", 
     "link":"http://www.wunderground.com" 
     }, etc. etc. 

改成了

componentDidMount() { 
     $.ajax({ 
      url: "http://api.wunderground.com/api/*****/....", 
      success: function(data){ 
       this.setState({ 
        wetter: data 
       }); 
      }.bind(this) 
     }); 
    } 

    render() { 
     return <div>{this.state.wetter.response.termsofService}</div>; 
    } 

But only get console: Uncaught TypeError: Cannot read property 'termsofService' of undefined 

我改变了它，它看起来仍然logically..but错误

Answer 1

而不是设置wetter至data.response的，只需将其设置为data。

这种方式可以达到整个对象。例如： -

return <div>{this.state.wetter.response.termsofService}</div>; 
    // http://www.wunderground.com/weather/api/d/terms.html 

或

return <div>{this.state.wetter.response.features.conditions}</div>; 
    // 1 

或

return <div>{this.state.wetter.current_observation.image.url}</div>; 
    // http://icons.wxug.com/graphics/wu2/logo_130x80.png