admin管理员组文章数量:1331230
I'm trying out an example in reactJS where I'm displaying a list of records and delete them.Refresh the list after each delete. I saw many questions raised by this error heading, but nothing worked with me.
var CommentBox = React.createClass({
loadCommentsFromServer: function () {
$.ajax({
url: this.props.listUrl,
dataType: 'json',
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this),
cache: false
});
},
getInitialState: function () {
return {data: []};
},
ponentDidMount: function () {
this.loadCommentsFromServer();
},
onClickingDelete: function() {
alert('Upper layer on click delete called');
this.loadCommentsFromServer();
},
render: function () {
return (
<div className="mentBox">
<h1>Static web page</h1>
<CommentList data={this.state.data} onClickingDelete={this.onClickingDelete} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
if (this.props.data != '') {
var mentNodes = this.props.data.content.map(function (ment) {
return (
<div className="ment" key={ment.id}>
<h2 className="mentpageName">
{ment.pageName}
</h2>
<p> {ment.pageContent} </p>
<DeleteButton deleteUrl={'/delete/' + ment.id} onClickingDelete={this.props.onClickingDelete}/>
</div>
);
});
}
return (
<div className="mentList">
{mentNodes}
</div>
);
}
});
var DeleteButton = React.createClass({
onClickingDelete: function() {
$.ajax({
url: this.props.deleteUrl,
type: 'delete',
success: function () {
alert('Successfully deleted');
this.props.onClickingDelete();
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.deleteUrl, status, err.toString());
}.bind(this),
cache: false
});
},
render: function() {
return (
<button name={this.props.deleteUrl} onClick={this.onClickingDelete}>Delete</button>
);
}
});
ReactDOM.render(<CommentBox listUrl="/list/"/>,
document.getElementById('content'));
On page load, I'm getting
"Uncaught TypeError: Cannot read property 'props' of undefined"
in the CommentList's line call to DeleteButton. Wondering how "this" can go undefined
I'm trying out an example in reactJS where I'm displaying a list of records and delete them.Refresh the list after each delete. I saw many questions raised by this error heading, but nothing worked with me.
var CommentBox = React.createClass({
loadCommentsFromServer: function () {
$.ajax({
url: this.props.listUrl,
dataType: 'json',
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this),
cache: false
});
},
getInitialState: function () {
return {data: []};
},
ponentDidMount: function () {
this.loadCommentsFromServer();
},
onClickingDelete: function() {
alert('Upper layer on click delete called');
this.loadCommentsFromServer();
},
render: function () {
return (
<div className="mentBox">
<h1>Static web page</h1>
<CommentList data={this.state.data} onClickingDelete={this.onClickingDelete} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
if (this.props.data != '') {
var mentNodes = this.props.data.content.map(function (ment) {
return (
<div className="ment" key={ment.id}>
<h2 className="mentpageName">
{ment.pageName}
</h2>
<p> {ment.pageContent} </p>
<DeleteButton deleteUrl={'/delete/' + ment.id} onClickingDelete={this.props.onClickingDelete}/>
</div>
);
});
}
return (
<div className="mentList">
{mentNodes}
</div>
);
}
});
var DeleteButton = React.createClass({
onClickingDelete: function() {
$.ajax({
url: this.props.deleteUrl,
type: 'delete',
success: function () {
alert('Successfully deleted');
this.props.onClickingDelete();
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.deleteUrl, status, err.toString());
}.bind(this),
cache: false
});
},
render: function() {
return (
<button name={this.props.deleteUrl} onClick={this.onClickingDelete}>Delete</button>
);
}
});
ReactDOM.render(<CommentBox listUrl="/list/"/>,
document.getElementById('content'));
On page load, I'm getting
"Uncaught TypeError: Cannot read property 'props' of undefined"
in the CommentList's line call to DeleteButton. Wondering how "this" can go undefined
Share Improve this question edited Mar 30, 2018 at 7:11 Hakan Fıstık 19.5k16 gold badges123 silver badges147 bronze badges asked May 7, 2016 at 7:05 User1230321User1230321 1,4755 gold badges23 silver badges40 bronze badges 2- probably because you are deleting the element. your whole ponent is removed.. but then you are on the callback saying this.props.something. try creating a pointer to your this to call. – John Ruddell Commented May 7, 2016 at 7:16
- @John, that was working without "onCommentSubmit={this.handleCommentSubmit}" in ment list ponent. Removed that line to avoid confusion. I'm getting the above error on page load. Sorry for that. Please help. – User1230321 Commented May 7, 2016 at 9:34
1 Answer
Reset to default 7When you use array.map, this is undefined and undergoes the normal resolution for this in javascript. In strict mode, it'll stay undefined.
Non-strict mode: this resolves to Window
> [1].map(function(test) {console.log(this)}); > [object Window]
Strict mode: this resolves to undefined
> 'use strict'; [1].map(function(test) {console.log(this)}); > undefined
There are different ways to bind it to the current object.
Using map.thisArg
this.props.data.content.map(function(ment) { ... }, this);
Using bind
this.props.data.content.map(function(ment) { ... }).bind(this);
Using an arrow function
this.props.data.content.map(ment => { ... });
Using a variable
var that = this; this.props.data.content.map(function(ment) { ... onClickingDelete={that.props.onClickingDelete} ... });
Sources:
If a thisArg parameter is provided to map, it will be passed to callback when invoked, for use as its this value. Otherwise, the value undefined will be passed for use as its this value. https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
In strict mode, the value of this remains at whatever it's set to when entering the execution context. If it's not defined, it remains undefined. https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/this
本文标签: javascriptUncaught TypeError Cannot read property 39props39 of undefined in reactJSStack Overflow
版权声明:本文标题:javascript - Uncaught TypeError: Cannot read property 'props' of undefined in reactJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742251568a2440860.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论