Question

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

Answer 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的相关问题：

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

1 个答案: