我刚开始用 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);

最佳答案

将代码修改为:

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

这里 dataType: 'json', 很重要。参见 $.ajax() docs以及关于 SO 的相关问题:

• $.ajax - dataType
• Differences between contentType and dataType in jQuery ajax function

关于javascript - react 代码抛出 “TypeError: this.props.data.map is not a function”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21074638/