Reactjs 在映射两个json对象时看到错误-->;未捕获类型错误:无法读取属性';星星';未定义的
我试图映射两个json对象,但遇到以下错误:Reactjs 在映射两个json对象时看到错误-->;未捕获类型错误:无法读取属性';星星';未定义的,reactjs,Reactjs,我试图映射两个json对象,但遇到以下错误: Uncaught TypeError: Cannot read property 'stars' of undefined 为了提供一些背景信息,我正在建立一个评论系统(你可以给一顿饭打分1-5星)。我有一个stars.json和comments.json文件,希望将两者分开,而不是合并。为了呈现用户评论和星级,我想映射每个json对象,但这就是我得到上述错误的时候。我也在传递正确的道具 <ReviewList comments={this.
Uncaught TypeError: Cannot read property 'stars' of undefined
为了提供一些背景信息,我正在建立一个评论系统(你可以给一顿饭打分1-5星)。我有一个stars.json和comments.json文件,希望将两者分开,而不是合并。为了呈现用户评论和星级,我想映射每个json对象,但这就是我得到上述错误的时候。我也在传递正确的道具
<ReviewList comments={this.state.comments} stars={this.state.stars} />
我做错了什么
这是我的密码:
var ReviewList = React.createClass({
render: function(){
var commentNodes = this.props.comments.map(function(comment){
this.props.stars.map(function(star){
return (
<Comment comment={comment} star={star} />
);
})
});
return (
<div className="reviewList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function(){
return (
<div className="comment">
{this.props.comment.comment}
({this.props.star.star})
</div>
);
}
});
var ReviewList=React.createClass({
render:function(){
var commentNodes=this.props.comments.map(函数(注释){
this.props.stars.map(函数(star){
返回(
);
})
});
返回(
{commentNodes}
);
}
});
var Comment=React.createClass({
render:function(){
返回(
{this.props.comment.comment}
({this.props.star.star})
);
}
});
此
在render()中
指的是ReviewList对象。但是这个inside comments.map指的是comments中的每个对象,而不是整个对象(ReviewList)
一种方法是将此
的引用保存在地图外部,以便在内部使用。像这样的
var that = this;
var commentNodes = this.props.comments.map(function(comment){
return that.props.stars.map(function(star){
return (
<Comment comment={comment} star={star} />
);
});
});
阅读更多关于如何在嵌套函数中工作的信息。这是其中一个参考资料
哦,太棒了。我现在没有收到任何错误,但它仍然不能完全正常工作。我希望看到一个评论列表(又名commentNodes),但它们根本没有呈现。我想知道这是否与getInitialState有关,但在我看来也不错。顺便说一句,我忘了提到你也必须返回内部映射。我更新了答案。另外,我在这里创建了一个示例,看看你是否在做类似的事情。
var commentNodes = this.props.comments.map(function(comment){
return this.props.stars.map(function(star){
return (
<Comment comment={comment} star={star} />
);
})
}.bind(this)); // <---- bind will make this outside map available inside