javascript React 教程：未捕获的类型错误：无法读取 null 的属性“数据”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32489741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React tutorial: Uncaught TypeError: Cannot read property 'data' of null
提问by dragonmnl
I'm following React tutorial at: http://facebook.github.io/react/docs/tutorial.html
我正在关注 React 教程：http: //facebook.github.io/react/docs/tutorial.html
I'm just afterhttp://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server
我只是在http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server之后
I went through similar questions on SO but not found a solution for my specific case.
我在 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')
);
When I try to use data got from server (first step --> see 2nd link), I get this error:
当我尝试使用从服务器获取的数据时（第一步 --> 参见第二个链接），出现此错误：
Uncaught TypeError: Cannot read property 'data' of null
未捕获的类型错误：无法读取 null 的属性“数据”
I guess this has something to do with passing data the wrong way.
我想这与以错误的方式传递数据有关。
EDIT: I edited the cod with the answers given so far
编辑：我用迄今为止给出的答案编辑了鳕鱼
EDIT 2: Now it works with dumb data (var data = [ ... ) but not when got from the server
编辑 2：现在它适用于哑数据（var data = [ ... ）但不是从服务器获取时
采纳答案by brenzy
Just adding that line will not get data from the server. You need to work all the way down to the end of the "Reactive State" section, creating the data file, and adding some ajax code to load the data.
仅添加该行不会从服务器获取数据。您需要一直工作到“反应状态”部分的末尾，创建数据文件，并添加一些 ajax 代码来加载数据。
回答by Henrik Andersson
You're sending dataas a prop to CommentBoxand trying to pass it on through CommentBoxstate.
您将data作为道具发送给CommentBox并尝试通过CommentBoxstate传递它。
<CommentList data={this.props.data} />
instead of
代替
<CommentList data={this.state.data} />
I usually reason about props this way; Props are stuff coming in and State is stuff that's already in.
我通常以这种方式推理道具；props 是进来的东西，State 是已经进来的东西。
回答by Mike
You're sending datavia props to CommentBoxand checking for it in your CommentListcomponent
您正在data通过道具发送CommentBox并在您的CommentList组件中检查它
