我正在学习 React 入门教程，但在进行实验时遇到了问题。我能够记录一个对象，但在控制台中，我收到以下错误:
未捕获的类型错误:无法读取未定义的属性“结果”
我可以记录该对象，这样我就知道我的 api 调用成功了，但由于某种原因，我的 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}°</div>
</div>
</div>
)
}
});
React.renderComponent(<weatherWidget />, document.body);
</script>
</body>
</html>
最佳答案
问题是 React 正在尝试访问尚未获取的 API 调用的结果。您应该在访问嵌套对象时添加 null 检查(这是一个 javascript 问题，而不是 React 特定的问题)。
其次，当数据不可用时，您的组件仍会尝试渲染某些内容。 React 会在您将组件注入(inject)页面时呈现您的组件，因此请考虑在 API 结果尚未保存到状态时显示“正在加载”指示器。
这是你的 fiddle 的一个分支，带有适当的空检查和“加载指示器”:
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}°</div>
</div>
</div>
);
关于javascript - ReactJS 中的嵌套对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23450384/