ReactJS中的嵌套對象

我正在瀏覽響應入門教程，並遇到了一個我正在做的實驗中的問題。我能夠記錄一個對象，但在控制檯中，我得到以下錯誤：ReactJS中的嵌套對象

遺漏的類型錯誤：無法未定義

讀取屬性「結果」我可以登錄的對象，所以我知道我的API調用成功，但由於某種原因，我的反應狀態似乎沒有得到更新。我認爲我的渲染函數在我的數據對象從API更新之前發生，但不知道如何修復它。

<!doctype html> 
<html> 
<head> 
    <title>Weather Widget</title> 
    <link rel="stylesheet" href="weather.css" /> 
    <script src="http://fb.me/react-0.10.0.js"></script> 
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
</head> 
<body> 
<script type="text/jsx"> 
    /*** @jsx React.DOM */ 
    var weatherWidget = React.createClass({ 
     loadData: function(){ 
      $.ajax({ 
       url: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%2222102%22&format=json', 
       dataType : "jsonp", 
       cache: false, 
       success: function(data) { 
        console.log(data) 
        this.setState({data: data}); 
       }.bind(this) 
      }); 
     }, 
     getInitialState: function(){ 
      return {data: []}; 
     }, 
     componentWillMount: function(){ 
      this.loadData(); 
     }, 
     render: function(){ 
      return(
       <div className="ww-container"> 
        <div className="ww-current-condition"> 
         <div className="ww-current-temperture">{this.state.data.query.results.channel.item.condition.temp}&deg;</div> 
        </div> 
       </div> 
      ) 
     } 
    }); 

    React.renderComponent(<weatherWidget />, document.body); 
</script> 
</body> 

</html>

來源

2014-05-03 skooliano

問題是，反應是試圖同時它尚未獲取訪問API調用的結果。訪問嵌套對象時應該添加空檢查（這是一個JavaScript問題，而不是特定於React的東西）。

其次，儘管數據不可用，但您的組件仍會嘗試渲染某些內容。 React會在您將組件注入頁面時呈現您的組件，因此請考慮在API結果尚未保存到狀態時顯示「加載」指示符。

這是你撥弄適當null檢查& 「負載指標」的一個分支：

http://jsfiddle.net/jxg/9WZA5/

render: function(){ 
    var degrees = this.state.item ? this.state.item.condition.temp : 'loading...'; 
    return(
    <div className="ww-container"> 
     <div className="ww-current-condition"> 
     <div className="ww-current-temperture">{degrees}&deg;</div> 
     </div> 
    </div> 
);

來源

2014-05-03 23:41:06 jxg

這是有幫助的。非常感謝！ – skooliano

ReactJS中的嵌套對象

回答

相關問題