Load Initial Data via AJAX Back

Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.

When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.

var UserGist = React.createClass({
    getInitialState: function () {
        return {
            userName: '',
            lastGistUrl: ''
        };
    },

    componentDidMount: function () {
        this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];

            this.setState({
                userName: lastGist.owner.login,
                lastGistUrl: lastGist.html_url
            });
        });  
    },

    componentWillUnmount: function () {
        this.serverRequest.abort();
    },

    render: function () {
        return (
            <div>
                {this.state.userName}'s last gist is
                <a href="{this.state.lastGistUrl}" target="_blank">here</a>
            </div>
        );
    }
});

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('content')
);

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize