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

我刚刚开始用 React 编码，我习惯用 CoffeeScript 编码。我尝试沿着React 文档中提供的教程 http://facebook.github.io/react/docs/tutorial.html并为状态更新做了类似的事情。

然而，我得到TypeError: this.props.data.map is not a function.

我有点迷失，想知道我错在哪里。有人可以指导我并告诉我哪里出错了吗？

这是我的代码：

(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),

Here dataType: 'json',很重要。看$.ajax() docs http://api.jquery.com/jquery.ajax/以及SO的相关问题：

• $.ajax - 数据类型 https://stackoverflow.com/q/2722750/2157640
• jQuery ajax 函数中 contentType 和 dataType 的区别 https://stackoverflow.com/q/14322984/2157640