This.IsMounted () is not a function
I am trying to create a simple React app. It fetches data from the ajax call and displays it to the page. The problem that I am setting the state of this.props after the ajax call. I am getting this error:
Uncaught TypeError: this.isMounted is not a function
I've been going through the tutorials and looking at sample code like this page on loading information via ajax on a response site. https://facebook.github.io/react/tips/initial-ajax.html but I can't see what might be causing this error. Here's my code:
var ANiceReminderApp = React.createClass({
getInitialState: function(){
return {
quotes: []
};
},
componentDidMount: function(){
$.ajax({
headers: { 'X-Mashape-Key':'xxxxxx'},
url: 'https://healthruwords.p.mashape.com/v1/quotes/',
type: 'GET',
dataType: 'JSON',
success: function(data){
var quote = data[0].media;
if(this.isMounted()){
this.setState({
quotes: quote
});
}
}
});
},
render: function() {
return (
<div className="container">
hello world
<img src={this.state.quotes}/>
<button>Need more inspiration?</button>
</div>
);
}
});
React.render(<ANiceReminderApp />, document.body);
Thanks in advance!
source to share
@ gilly3 explains the problem. However, I prefer a different solution: React will efficiently bind the methods of the class automatically, which means it this
will treat the instance correctly. Therefore, I usually use methods as callbacks:
React.createClass({
componentDidMount: function(){
$.ajax({
// the method is already bound to the component
success: this.onDataReceived
});
},
onDataReceived: function(data) {
var quote = data[0].media;
if(this.isMounted()){
this.setState({
quotes: quote
});
}
},
// ...
});
This has several advantages:
-
In theory at least React binding is more efficient than using
.bind
. This is especially true if you have to call multiple times.bind
for multiple calls. -
This makes the callback more easily testable on its own.
-
This makes it easier to invoke the callback logic through some other code path (for example, if you also want to accept the data provided through
props
).
It is also worth looking at this discussion , which suggests that it isMounted
might be deprecated in the future - the suggested way in this case is to keep the link to the AJAX request and abort at componentWillUnmount
.
source to share
In event handlers, this
refers to the object that raised the event. In your case, it will be an object jqXHR
that doesn't really have a method .isMounted()
.
To handle this situation, you need to either store a reference to the external this
, or use that reference in an event handler, or use function.bind()
to force the function to save the external context.
Here's an example of how to do the last method:
$.ajax({
...
success: function(data) {
var quote = data[0].media;
if (this.isMounted()){
this.setState({
quotes: quote
});
}
}.bind(this); // Note the use of .bind(this) here
});
source to share