ReactJS 失败并出现错误“无法读取未定义的属性‘地图’";
[英] ReactJS fails with an error "Cannot read property 'map' of undefined`"
本文介绍了ReactJS 失败并出现错误“无法读取未定义的属性‘地图’";的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
按照 react.js 教程我有一个错误:Uncaught TypeError: Cannot read property 'map' of undefined
.
我严格遵循了教程,但仍然坚持从服务器部分.当我使用 url 数据而不是硬编码的 JSON 数据提供 commentBox 时会出现错误.
/** @jsx React.DOM */
var converter = new Showdown.converter();变量数据 = [{ 作者:Daniel Lo Nigro",文字:Hello ReactJS.NET World!"},{ 作者:Pete Hunt",文字:这是一条评论"},{ 作者:Jordan Walke",文字:这是*另一个*评论"}];var Comment = React.createClass({渲染:函数(){var rawMarkup = converter.makeHtml(this.props.children.toString());返回 (<div className="注释"><h2 className="commentAuthor">{this.props.author}<span risklySetInnerHTML={{__html: rawMarkup}}/>
);}});var CommentList = React.createClass({渲染:函数(){var commentNodes = this.props.data.map(function (comment) {return <Comment author={comment.Author}>{comment.Text}</Comment>;});返回 (<div className="commentList">{评论节点}
);}});var CommentForm = React.createClass({渲染:函数(){返回 (<div className="commentForm">你好,世界!我是一个评论表格.
);}});var CommentBox = React.createClass({渲染:函数(){返回 (<div className="commentBox"><h1>评论</h1><CommentList data={this.props.data}/><评论表格/>
);}});React.renderComponent(//<CommentBox data={data}/>,//这很好用<CommentBox url="/comments"/>,//将数据脚改为url产生错误document.getElementById('内容'));
位于 http://localhost:52581/comments
的请求正在工作并返回一个 JSON 数据:
[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"这是一条评论"},{"Author":"Jordan Walke","Text":"这是*另一条*评论"}]
任何建议对我都有很大帮助.谢谢.
解决方案
在 CommentBox 中,这一行是问题所在:<CommentList data={this.props.data}/>
>
你不再有 props.data
因为你传入的是 URL 而不是 JS 对象.
您的第二个有效,因为您使用状态并将值默认为空数组,该数组仍然可以在其上运行地图.
Following react.js tutorial I've got an error: Uncaught TypeError: Cannot read property 'map' of undefined
.
I was following the tutorial strict but stuck at Fetching from the server part. The error appears when I feed commentBox with url data instead of the hardcoded JSON data.
/** @jsx React.DOM */
var converter = new Showdown.converter();
var data = [
{ Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" },
{ Author: "Pete Hunt", Text: "This is one comment" },
{ Author: "Jordan Walke", Text: "This is *another* comment" }
];
var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return <Comment author={comment.Author}>{comment.Text}</Comment>;
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
React.renderComponent(
//<CommentBox data={data}/>, //this works fine
<CommentBox url="/comments" />, //Changing data feet to url produces an error
document.getElementById('content')
);
The request at http://localhost:52581/comments
is working and returns a JSON data:
[{"Author":"Daniel Lo Nigro","Text":"Hello ReactJS.NET World!"},{"Author":"Pete Hunt","Text":"This is one comment"},{"Author":"Jordan Walke","Text":"This is *another* comment"}]
Any advice would be a big help for me. Thanks.
解决方案
In CommentBox, this line is the problem: <CommentList data={this.props.data} />
You no longer have props.data
since you are passing a URL in instead of a JS object.
Your 2nd one works because you use state and default the value to an empty array, which can still have map run on it.
这篇关于ReactJS 失败并出现错误“无法读取未定义的属性‘地图’";的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!