Javascript ReactJS和复杂JSON对象
我遵循了ReactJS教程,它非常简单,可以完成更复杂的内容 在我的例子中,我想使用一个复杂的JSON对象,它包含一个映射、一个值、一个列表等等。。。代码如下:Javascript ReactJS和复杂JSON对象,javascript,json,reactjs,Javascript,Json,Reactjs,我遵循了ReactJS教程,它非常简单,可以完成更复杂的内容 在我的例子中,我想使用一个复杂的JSON对象,它包含一个映射、一个值、一个列表等等。。。代码如下: var NotificationStatus = React.createClass({ loadNotificationsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json',
var NotificationStatus = React.createClass({
loadNotificationsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
console.log(this.state.data.notificationType);
}.bind(this)
});
},
getInitialState: function() {
return {data: {}};
},
componentWillMount: function() {
this.loadNotificationsFromServer();
setInterval(this.loadNotificationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div>
<li className="dropdown-menu-title">
<span>You have {this.state.data.notificationCount} notifications</span>
</li>
<Notifications data={this.state.data.notificationType} />
</div>
);
}
});
var Notifications = React.createClass({
render: function() {
var notificationNodes = this.props.data.map(function (notif, index) {
return <Notification key={index}>{notif.type}</Notification>;
});
return <li>{notificationNodes}</li>;
}
});
var Notification = React.createClass({
render: function() {
return (
<a href="#">
<span className="icon blue"><i className={this.props.children == "user" ? 'icon-user' : 'icon-comment-alt'}></i></span>
<span className="message">{this.props.children}</span>
<span className="time">1 min</span>
</a>
);
}
});
React.renderComponent(
<NotificationStatus url="/data/notifications.json" pollInterval={2000} />,
document.getElementById('notificationbar')
);
当我尝试获取notificationType时,此时会出现一个错误“this.props.data未定义”
var notificationNodes = this.props.data.map(function (notif, index) {
我真的不知道声明有什么问题,当我在ajax级别获得JSON时,我确实有一个映射(通过console.log验证)
任何帮助都会很好
非常感谢。当您的组件第一次呈现时,NotificationStatus的
this.state.data
将是{}
,因为这是从getInitialState
返回的。这意味着当你渲染
<Notifications data={this.state.data.notificationType} />
因此,当通知首次呈现时,this.props.data不是一个列表。这取决于您的应用程序,这里的正确修复方法是什么,但您可能希望使用data:null
进行初始化,并将其添加到NotificationStatus的render方法的顶部:
if (!this.state.data) {
return <div>Loading...</div>;
}
if(!this.state.data){
返回装载。。。;
}
除了Ben的观点之外,您还在componentWillMount中调用loadNotificationsFromServer。您应该从服务器调用loadNotificationsFromServer并启动componentDidMount内的任何计时器,因为您的组件尚未装入DOM中。您可以在此处阅读更多内容:
回顾代码,我不完全确定对象图应该是什么样子,但在一个地方,它看起来像是在尝试迭代一组通知,在另一个地方则是一个通知
为了缓解Ben提到的问题,您还可以使用notificationType和count(“”和0)的默认值来初始化状态,作为一种快速修复方法,但逻辑运算符也可以工作
<Notifications data={undefined} />
if (!this.state.data) {
return <div>Loading...</div>;
}