Javascript ReactJS中的嵌套对象_Javascript_Json_Reactjs

Javascript ReactJS中的嵌套对象

javascript json reactjs

Javascript ReactJS中的嵌套对象,javascript,json,reactjs,Javascript,Json,Reactjs,我正在学习react入门教程，在做一个实验时遇到了一个问题。我可以记录对象，但在控制台中，我收到以下错误：未捕获的TypeError:无法读取未定义的属性“results” 我可以记录对象，这样我就知道我的api调用成功了，但由于某些原因，我的react状态似乎没有得到更新。我认为我的渲染函数发生在我的数据对象从API更新之前，但不确定如何修复它问题是React试图访问API调用的结果，而API调用尚未获取。当访问嵌套对象时，应该添加空检查这是一个javascript问题，而不是特定于Rea

我正在学习react入门教程，在做一个实验时遇到了一个问题。我可以记录对象，但在控制台中，我收到以下错误：

未捕获的TypeError:无法读取未定义的属性“results”

我可以记录对象，这样我就知道我的api调用成功了，但由于某些原因，我的react状态似乎没有得到更新。我认为我的渲染函数发生在我的数据对象从API更新之前，但不确定如何修复它

问题是React试图访问API调用的结果，而API调用尚未获取。当访问嵌套对象时，应该添加空检查这是一个javascript问题，而不是特定于React的问题

其次，当数据不可用时，组件仍将尝试渲染某些内容。当您将组件注入页面时，反应会呈现组件，因此考虑在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>

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>
  );