[英]React code throwing “TypeError: this.props.data.map is not a function”
I have just started coding in React, I am used to coding in CoffeeScript. 我刚开始使用React进行编码,我习惯用CoffeeScript编写代码。 I tried to code along the tutorial presented in the React docs and made something similar for status updates.
我尝试按照React文档中提供的教程进行编码,并为状态更新做了类似的操作。
However, I am getting TypeError: this.props.data.map is not a function
. 但是,我得到
TypeError: this.props.data.map is not a function
。
I am kinda lost and am wondering where I am wrong. 我有点失落,我想知道我错在哪里。 Can someone please guide me and tell me where I am going wrong?
有人可以指导我,告诉我哪里出错了吗?
This is my 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);
Modify the code to this: 将代码修改为:
loadStatusFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data})
}.bind(this),
Here dataType: 'json',
is important. 这里
dataType: 'json',
很重要。 See $.ajax()
docs and related questions on SO: 请参阅有关SO的
$.ajax()
文档和相关问题:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.