From 43415de266b166fd3464c4426d4eb9cbfc4fa706 Mon Sep 17 00:00:00 2001 From: Tom Haggie Date: Sun, 25 May 2014 10:03:09 -0700 Subject: [PATCH 1/3] Updated the ajax to tip to also mention that you need to check that the component is still mounted before updating it's state. --- docs/tips/12-initial-ajax.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/tips/12-initial-ajax.md b/docs/tips/12-initial-ajax.md index 220886482dc..f15699835c9 100644 --- a/docs/tips/12-initial-ajax.md +++ b/docs/tips/12-initial-ajax.md @@ -9,6 +9,8 @@ next: false-in-jsx.html Fetch data in `componentDidMount`. When the response arrives, store the data in state, triggering a render to update your UI. +When processing the response of an ajax request be sure to check that the component is still still mounted before updating its state using `this.isMounted`. + This example fetches the desired Github user's latest gist: ```js @@ -25,10 +27,12 @@ var UserGist = React.createClass({ componentDidMount: function() { $.get(this.props.source, function(result) { var lastGist = result[0]; - this.setState({ - username: lastGist.owner.login, - lastGistUrl: lastGist.html_url - }); + if (this.isMounted()) { + this.setState({ + username: lastGist.owner.login, + lastGistUrl: lastGist.html_url + }); + } }.bind(this)); }, @@ -47,3 +51,4 @@ React.renderComponent( mountNode ); ``` + \ No newline at end of file From e680cc5b3d3ec350d776b52b176246c40f6a7775 Mon Sep 17 00:00:00 2001 From: thaggie Date: Sun, 25 May 2014 15:30:02 -0700 Subject: [PATCH 2/3] Update 12-initial-ajax.md --- docs/tips/12-initial-ajax.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tips/12-initial-ajax.md b/docs/tips/12-initial-ajax.md index f15699835c9..877c786beea 100644 --- a/docs/tips/12-initial-ajax.md +++ b/docs/tips/12-initial-ajax.md @@ -9,7 +9,7 @@ next: false-in-jsx.html Fetch data in `componentDidMount`. When the response arrives, store the data in state, triggering a render to update your UI. -When processing the response of an ajax request be sure to check that the component is still still mounted before updating its state using `this.isMounted`. +When processing the response of an asynchronous request be sure to check that the component is still mounted before updating its state by using `this.isMounted`. This example fetches the desired Github user's latest gist: @@ -51,4 +51,4 @@ React.renderComponent( mountNode ); ``` - \ No newline at end of file + From 26283d0e3a98eb078dc08214d5851ae7499e4d5a Mon Sep 17 00:00:00 2001 From: thaggie Date: Sun, 25 May 2014 15:37:10 -0700 Subject: [PATCH 3/3] Update 12-initial-ajax.md --- docs/tips/12-initial-ajax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tips/12-initial-ajax.md b/docs/tips/12-initial-ajax.md index 877c786beea..21f47f557e2 100644 --- a/docs/tips/12-initial-ajax.md +++ b/docs/tips/12-initial-ajax.md @@ -9,7 +9,7 @@ next: false-in-jsx.html Fetch data in `componentDidMount`. When the response arrives, store the data in state, triggering a render to update your UI. -When processing the response of an asynchronous request be sure to check that the component is still mounted before updating its state by using `this.isMounted`. +When processing the response of an asynchronous request, be sure to check that the component is still mounted before updating its state by using `this.isMounted()`. This example fetches the desired Github user's latest gist: