React 教程:未捕获的类型错误:无法读取 null 的属性“data”
2015-09-09
21418
我正在关注以下 React 教程: http://facebook.github.io/react/docs/tutorial.html
我只是 在 http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server
我在 SO 上遇到了类似的问题,但没有找到针对我的具体情况的解决方案。
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"},
{author: "Bob Lilly", text: "This is *another* comment 2"}
];
var Comment = React.createClass({
render: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
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">
<br/>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.render(
// <CommentBox url="comments.json" />,
<CommentBox data={data} />,
document.getElementById('content')
);
当我尝试使用从服务器获取的数据(第一步 --> 参见第二个链接)时,出现此错误:
Uncaught TypeError: Cannot read property 'data' of null
我猜这与传递数据有关错误的方式。
编辑 :我根据目前给出的答案编辑了代码
编辑 2 :现在它可以处理哑数据(var data = [ ... ),但从服务器获取时则不行
3个回答
您正在将
data
作为 prop 发送到
CommentBox
,并尝试通过
CommentBox
状态传递它。
<CommentList data={this.props.data} />
而不是
<CommentList data={this.state.data} />
我通常以这种方式推理 props;Props 是进来的东西,而 State 是已经存在的东西。
Henrik Andersson
2015-09-09
仅添加该行不会从服务器获取数据。您需要一直工作到“反应状态”部分的末尾,创建数据文件,并添加一些 ajax 代码来加载数据。
brenzy
2015-09-10
您正在通过 props 将
data
发送到
CommentBox
并在
CommentList
组件中对其进行检查
Mike
2015-09-09