Browse Source

Merge pull request #720 from bvaughn/update-on-async-update-again

Update on async update again
main
Brian Vaughn 7 years ago
committed by GitHub
parent
commit
c35fe4f451
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      examples/update-on-async-rendering/updating-external-data-when-props-change-after.js
  2. 8
      examples/update-on-async-rendering/updating-external-data-when-props-change-before.js

8
examples/update-on-async-rendering/updating-external-data-when-props-change-after.js

@ -20,13 +20,13 @@ class ExampleComponent extends React.Component {
} }
componentDidMount() { componentDidMount() {
this._loadAsyncData(); this._loadAsyncData(this.props.id);
} }
// highlight-range{1-5} // highlight-range{1-5}
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevState.externalData === null) { if (prevState.externalData === null) {
this._loadAsyncData(); this._loadAsyncData(this.props.id);
} }
} }
@ -44,8 +44,8 @@ class ExampleComponent extends React.Component {
} }
} }
_loadAsyncData() { _loadAsyncData(id) {
this._asyncRequest = asyncLoadData(this.props.id).then( this._asyncRequest = asyncLoadData(id).then(
externalData => { externalData => {
this._asyncRequest = null; this._asyncRequest = null;
this.setState({externalData}); this.setState({externalData});

8
examples/update-on-async-rendering/updating-external-data-when-props-change-before.js

@ -5,14 +5,14 @@ class ExampleComponent extends React.Component {
}; };
componentDidMount() { componentDidMount() {
this._loadAsyncData(); this._loadAsyncData(this.props.id);
} }
// highlight-range{1-6} // highlight-range{1-6}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.id !== this.props.id) { if (nextProps.id !== this.props.id) {
this.setState({externalData: null}); this.setState({externalData: null});
this._loadAsyncData(); this._loadAsyncData(nextProps.id);
} }
} }
@ -30,8 +30,8 @@ class ExampleComponent extends React.Component {
} }
} }
_loadAsyncData() { _loadAsyncData(id) {
this._asyncRequest = asyncLoadData(this.props.id).then( this._asyncRequest = asyncLoadData(id).then(
externalData => { externalData => {
this._asyncRequest = null; this._asyncRequest = null;
this.setState({externalData}); this.setState({externalData});

Loading…
Cancel
Save