未捕获的类型错误:this.props.data.map不是函数
Uncaught TypeError: this.props.data.map is not a function
我不知道为什么我得到这个错误,我已经从教程中修改了代码,使this.setState({data: data});
成为this.setState({data: data.datalist});
,以反映从后端响应。我已经根据这个答案对我的代码进行了更改,但同样的错误仍然存在。React JS - Uncaught TypeError: this.props.data.map不是一个函数。
从我的后端获取JSON的教程示例代码:
import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'
var Comment = React.createClass({
rawMarkup: function() {
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
},
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
});
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({cache:false});
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
console.log(data.datalist);
this.setState({data: data.datalist});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
handleCommentSubmit: function(comment) {
var comments = this.state.data;
comment.id = Date.now();
var newComments = comments.concat([comment]);
this.setState({data: newComments});
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
this.setState({data: comments});
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if (!text || !author) {
return;
}
this.props.onCommentSubmit({author: author, text: text});
this.setState({author: '', text: ''});
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
}
});
ReactDOM.render(
<CommentBox url="/core/get_json" pollInterval={2000} />,
document.getElementById('app')
);
JSON从后台(django):
def get_json(request):
return JsonResponse({'datalist': [
{'id': 1, 'author': "Pete Hunt", 'text': "This is one comment"},
{'id': 2, 'author': "Jordan Walke", 'text': "This is *another* comment"}
]})
浏览器在网络响应下得到所说的JSON:
{"datalist": [{"id": 1, "author": "Pete Hunt", "text": "This is one comment"}, {"id": 2, "author": "Jordan Walke", "text": "This is *another* comment"}]}
Render立即调用this.props.data,您的数据可能还没有到达,所以您需要检查数据是否准备好了,通过执行 this.props.data && this.props.data.map
。
var commentNodes = this.props.data && this.props.data.map(function(comment)
{
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
map函数被调用了两次,一次在请求之前,一次在请求之后。要纠正这个错误,可以使用
{this.props.data.length > 0 && this.props.data.map()}
相关文章:
- Ember Data DS.Model's set函数不起作用
- Extending Ext.data.NodeInterface
- 如何获取$data.Entity的密钥
- jQuery可以't获取data-*属性值,返回undefined
- Query JS Ext.data.Store
- 设置'这'在React with Inverse Data Flow中
- 如何从reactjs中的按钮向函数传递props
- Google Data API上的OOP Javascript回调方法
- 如何获取`data-listid`属性值
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- KOValidation在错误消息中获取可观察值、$index()、$data等
- ko.com在foreach$data变量上添加了write函数
- Javascript、jquery、主干网、splunk:on(“change”、{data}、handler)导致Ty
- React.jsthis.props.data.map()不是函数
- ReactJS:this.props.data.map 不是一个函数
- 未捕获类型错误:this.props.data.map不是函数(使用超级代理)
- Getting undefined for this.props.data
- ReactJS this.props.data is undefined
- Uncaught TypeError: this.props.data.map不是一个函数
- 未捕获的类型错误:this.props.data.map不是函数