Javascript React代码抛出“;TypeError:this.props.data.map不是函数”;

Javascript React代码抛出“;TypeError:this.props.data.map不是函数”;,javascript,reactjs,Javascript,Reactjs,我刚刚开始用React编写代码,我已经习惯了用CoffeeScript编写代码。我试着编写代码,并为状态更新做了类似的事情 但是,我得到了类型错误:this.props.data.map不是一个函数 我有点迷路了,不知道我错在哪里。有人能给我指点迷津吗 这是我的代码: (function() { var Status, StatusBox, StatusForm, StatusList, button, div, h4, textarea, _ref; _ref = React

我刚刚开始用React编写代码,我已经习惯了用CoffeeScript编写代码。我试着编写代码,并为状态更新做了类似的事情

但是,我得到了
类型错误:this.props.data.map不是一个函数

我有点迷路了,不知道我错在哪里。有人能给我指点迷津吗

这是我的代码:

(function() {
    var Status, StatusBox, StatusForm, StatusList, button, div, h4, textarea, _ref;

    _ref = React.DOM, div = _ref.div, textarea = _ref.textarea, button = _ref.button, h4 = _ref.h4;

    StatusBox = React.createClass({
        getInitialState: function() {
            return {
                data: []
            };
        },
        loadStatusFromServer: function() {
            return $.ajax({
                url: this.props.url,
                success: function(data) {
                    this.setState ({data : data})
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error("status.json", status, err.toString());
                }.bind(this)
            });
        },
        componentWillMount: function() {
            return setInterval(this.loadStatusFromServer, this.props.pollInterval);
        },
        render: function() {
            return div({
                className: "status-box"
            }, [
                StatusForm({}), StatusList({
                    data: this.state.data
                })
            ]);
        }
    });

    StatusList = React.createClass({
        render: function() {
            var statusNodes;
            statusNodes = this.props.data.map(function(status) {     // This is where is it throwing up an error. I have no idea why though?
                return Status({
                    author: status.author
                }, [status.text]);
            });
            return div({
                className: "comment-list"
            }, [statusNodes]);
        }
    });

    Status = React.createClass({
        render: function() {
            return div({
                className: "status"
            }, [
                h4({
                    className: "author"
                }, [this.props.author]), this.props.children
            ]);
        }
    });

    StatusForm = React.createClass({
        handleClick: function() {
            var name, value;
            name = "Samuel";
            value = this.refs.status.getDOMNode().value.trim();
            return this.refs.status.getDOMNode().value = '';
        },
        render: function() {
            return div({
                className: 'status-form'
            }, [
                textarea({
                    placeholder: "What's on your mind?...",
                    rows: 5,
                    ref: "status"
                }), button({
                    onClick: this.handleClick
                }, ["post"])
            ]);
        }
    });

    React.renderComponent(StatusBox({
        url: '/user/blahXHR',
        pollInterval: 5000
    }), document.body);
}).call(this);

将代码修改为:

loadStatusFromServer: function() {
    return $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data})
        }.bind(this),
在这里,
dataType:'json',
很重要。请参见以下内容和相关问题: