javascript - TypeError: this.props.data.map is not a function, but data is a list - Stack Overflow

admin管理员组

文章数量:1333632

I have written code from the ReactJs site here while working through their ment box tutorial. Yet for some reason it is giving me an error about map:

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

Specifically it is plaining about line 7: var mentNodes = this.props.data.map(function (ment){ .. etc.. }

This error is particularly confusing since data is a list. Here is the full code displaying that:

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

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

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

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

I have written code from the ReactJs site here while working through their ment box tutorial. Yet for some reason it is giving me an error about map:

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

Specifically it is plaining about line 7: var mentNodes = this.props.data.map(function (ment){ .. etc.. }

This error is particularly confusing since data is a list. Here is the full code displaying that:

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

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

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

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

• javascript
• reactjs

Share Improve this question Follow asked Jun 12, 2015 at 21:27 ApathyBearApathyBear 9,6151515 gold badges5959 silver badges9090 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

This shouldn't be wrapped in a string data="{this.props.data}". Just remove the quotes and it should work.

本文标签： javascriptTypeError thispropsdatamap is not a functionbut data is a listStack Overflow