javascript - 未捕获的 TypeError : this. props.comments.map 不是函数

Question

我刚刚开始在 React 中编码，我尝试编写一个评论框...但是，我收到 TypeError: this.props.comments.map is not a function 和 Uncaught TypeError: comments.concat is not a function。 ..我有点迷失，想知道我错在哪里。有人可以指导我并告诉我哪里出错了吗？

这是我的 react 代码

class Comment extends React.Component{
    render(){
        return(
            <div>
                <div className="comment-author">
                    -{this.props.author}
                </div>
                <div className="comment-body">
                    {this.props.children}
                </div>
            </div>


        );
    }
}

class CommentList extends React.Component{
    render(){
        var commentsNode=this.props.comments.map(function(comment,index){
            return <Comment
                key = {'comment-' + index}
                author={comment.author}>{comment.body}</Comment>
        });
        return(
            <div className="comment-list">
                {commentsNode}
            </div>
        );
    }
}
class CommentForm extends React.Component{
    handleSubmit(e){
        e.preventDefault();
        console.log(this,e);
        const author = this.refs.author.getDOMNode().value.trim();
        const body = this.refs.body.getDOMNode().value.trim();
        const form = this.refs.form.getDOMNode();
        this.props.onSubmit({author:author,body:body});
        console.log(author,body);
        form.reset();
    }
    render(){
        return(
            <form className="comment-form" ref="form" onSubmit={(e)=>{this.handleSubmit(e)}}>
                <input type="text" placeholder="your name" ref="author"/>
                <input type="text" placeholder="your comments" ref="body"/>
                <input type="submit" value="submit"/>
            </form>
        )
    }
}

class CommentBox extends React.Component{
    constructor(props){
        super();
        this.state= {
            comments: props.comments||[]
        };
    }
    loadDataFromServer(){
        $.ajax({
            url:this.props.url,
            dataType:"json",
            success:(comments)=>{
                console.log(comments);
                console.log(this);
                this.setState({comments: comments});
            },
            error:(xhr,status,errInfo)=>{
                console.log(errInfo.toString);
            }
        })

    }
    componentDidMount(){
        console.log('into DOM')
        this.loadDataFromServer();
    }
    handleNewComment(comment){
        const comments = this.state.comments;
        const newComments = comments.concat([comment]);
        const strComment = JSON.stringify(comment);
        this.setState({comments:newComments});
        console.log(comment);
        $.ajax({
            url:this.props.url,
            dataType:"json",
            type:"POST",
            data:strComment,
            success:(comments)=>{
                this.setState({comments:comments});
            },
            error:(xhr,status,err)=>{
                console.log(err.toString());
                this.setState({comments:comments});
            }
        });


    }
    render(){
        return(

            <div className="comment-box">
                <h1>Comments</h1>
                <CommentList comments={this.state.comments}/>
                <CommentForm onSubmit={(comment)=>this.handleNewComment(comment)}/>
            </div>
        );
    }
}
box = React.render(
  <CommentBox url="http://localhost:8080/react-test/json"/>,
    document.getElementById('content')
);

Answer 1

这主要是因为您要迭代数组，但从 ajax 调用收到的不是数组。检查您是否在 ajax 调用中收到 comments 数组。