5
Ich habe gerade mit der Programmierung in React begonnen, ich bin es gewohnt, in CoffeeScript zu codieren. Ich habe versucht, entlang der tutorial presented in the React docs zu kodieren und etwas ähnliches für Status-Updates gemacht.React code throwing "TypeError: this.props.data.map ist keine Funktion"
Allerdings bekomme ich TypeError: this.props.data.map is not a function.
Ich bin irgendwie verloren und frage mich, wo ich falsch liege. Kann mich bitte jemand führen und mir sagen, wo ich falsch liege?
Dies ist mein Code:
(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);