React component data can be obtained through the componentDidMount method Ajax, when the database from the server can store the data in the state, and then use this.setState method to re-render the UI.
When using asynchronous load data, use componentWillUnmount to cancel the outstanding request before the component is uninstalled.
The following example demonstrates getting the Github user's latest gist share description:
React instance
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 } user's latest Gist shared address: < a Href = { this . State . LastGistUrl } > { this . State . LastGistUrl } </ a > </ div > ) ; }
} ) ; ReactDOM . Render ( < UserGist Source = " https://api.github.com/users/ octocat / gists " />, mountNode
) ;
try it"
The above code uses jQuery to complete the Ajax request.
EmoticonEmoticon