React 代码抛出“TypeError: this.props.data.map is not a function”答案

【问题标题】：React code throwing “TypeError: this.props.data.map is not a function”React 代码抛出“TypeError: this.props.data.map is not a function”
【发布时间】：2014-01-31 05:11:02
【问题描述】：

我刚开始用 React 编码，我习惯用 CoffeeScript 编码。我尝试沿着tutorial presented in the React docs 编写代码并为状态更新做了类似的事情。

但是，我收到了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);

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将代码修改为：

loadStatusFromServer: function() {
    return $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data})
        }.bind(this),

这里dataType: 'json', 很重要。请参阅$.ajax() docs 和有关 SO 的相关问题：

【讨论】：