我正在从文档中学习reactjs。当我传输状态传递的数据时。例如。 getInitialState() 我得到一个错误:
Cannot read property 'data' of undefined
我尝试将 getInitialState() 更改为 this.state = { data : []}。然而，这不是正确的方法。我该如何解决？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/11057105_1610731242494235_1148661094_n.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
//Comment text
let converter = new Showdown.converter();
let Comment = React.createClass({
render(){
let rawMarkup = converter.makeHtml(this.props.children.toString())
return (
<div className="comment">
<h2 className="commentAuthor">
{ this.props.author }
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}}/>
</div>
);
}
});
//Comment list
let CommentList = React.createClass({
render(){
let commentNodes = this.props.data.map((comment, index) => {
return (
<Comment author={comment.author} key={index}>
{ comment.text }
</Comment>
)
});
return (
<div className="commentList">
{ commentNodes }
</div>
);
}
});
//Comment form
let CommentForm = React.createClass({
render(){
return (
<div className="commentForm">
CommentForm !!
</div>
);
}
});
//Comment component
let CommentBox = React.createClass({
getInitialState(){
return {
data: [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
]
}
},
render(){
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={ this.state.data }/>
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox data={this.state.data}/>, //<----[ERROR IS HERE Uncaught TypeError]
document.getElementById('content')
);
</script>
</body>
</html>最佳答案
状态由组件独立处理。您正在尝试访问 React 组件的外部状态。当您首先不需要 prop 时，您正在将 { this.state.data } 作为 prop 传递。您应该能够完全删除数据属性，您的代码将正常工作。
<CommentBox /> // get rid of data prop
关于javascript - react : Cannot read property 'data' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39992094/