5
私はReactでコーディングを開始しました。私はCoffeeScriptでコーディングするのに慣れています。 tutorial presented in the React docsに沿ってコードを作成しようとしましたが、状況の更新に似たものがありました。React code throw "TypeError：this.props.data.mapは関数ではありません"
しかし、私は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);