Reactjs 在映射两个json对象时看到错误-->;未捕获类型错误:无法读取属性';星星';未定义的

Reactjs 在映射两个json对象时看到错误-->;未捕获类型错误:无法读取属性';星星';未定义的,reactjs,Reactjs,我试图映射两个json对象,但遇到以下错误: Uncaught TypeError: Cannot read property 'stars' of undefined 为了提供一些背景信息,我正在建立一个评论系统(你可以给一顿饭打分1-5星)。我有一个stars.json和comments.json文件,希望将两者分开,而不是合并。为了呈现用户评论和星级,我想映射每个json对象,但这就是我得到上述错误的时候。我也在传递正确的道具 <ReviewList comments={this.

我试图映射两个json对象,但遇到以下错误:

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