Question

我在编写评论框教程时，已经编写了来自ReactJs网站here的代码。但由于某种原因，它给我一个关于地图的错误：

Uncaught TypeError: this.props.data.map is not a function

特别是它抱怨第7行：var commentNodes = this.props.data.map(function (comment){ .. etc.. }

由于数据是一个列表，因此此错误尤其令人困惑。以下是显示以下内容的完整代码：

            var CommentList = React.createClass({
                render: function(){
                    console.log(data)
                    var commentNodes = this.props.data.map(function (comment){
                        return (<Comment author={comment.author}>
                                {comment.text}
                                </Comment>);
                    });
                    return (<div className="commentList">
                            {commentNodes}            
                            </div>);
                }   
            });

            var Comment = React.createClass({
                render: function(){
                    return (<div className="comment">
                            <h2 className="commentAuthor">
                            {this.props.author}
                            </h2>
                            {this.props.children}
                            </div> );
                }
            });            

            var CommentForm = React.createClass({
                render: function(){
                    return (<div className="commentForm">I am a comment form!</div>);    
                }
            });            
            var CommentBox = React.createClass({
                render: function() {
                    return (<div className="commentBox">
                            <CommentList data="{this.props.data}" />
                            <CommentForm />
                            </div>);
                }
            });

            var data = [
                    {author: "Pete Hunt", text: "This is one comment"},
                    {author: "Jordan Walke", text: "This is *another* comment"}
            ];
            React.render(<CommentBox data={data} />, document.getElementById('content'));

Answer 1

这不应该包裹在字符串data="{this.props.data}"中。只需删除引号即可。

TypeError：this.props.data.map不是函数，但data是一个列表

1 个答案: