Question

我正在完成反应入门教程并遇到了我正在做的实验的问题。我能够记录一个对象，但在控制台中，我收到以下错误：

未捕获的TypeError：无法读取属性＆＃39;结果＆＃39;未定义的

我可以记录该对象，因此我知道我的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>

Answer 1

问题是React正在尝试访问尚未提取的API调用的结果。您应该在访问嵌套对象时添加空检查（这是一个javascript问题，而不是特定于React的内容）。

其次，虽然数据不可用，但您的组件仍会尝试渲染某些内容。 React会在您将组件注入页面时呈现您的组件，因此请考虑在API结果尚未保存到状态时显示“加载”指示符。

这是你的小提琴的一个分支与适当的空检查＆amp; “装载指标”：

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

ReactJS中的嵌套对象

1 个答案: