Как передать данные ajax для активации компонента?

Question

Я новичок в реагировании js.I только что получаю данные через ajax и манипулирую данными в компоненте. Но всегда я получаю undefined.I Знаю, что мой вызов ajax работает, но я не знаю, как обрабатывать эти данные в компоненте.

App.js

var React = require('react'); 
var Actions = require('../actions'); 
var Store = require('../stores/store'); 
var Nav =require('./Nav'); 
var Fakeprofile = require('./Fakeprofile'); 
var Sidemenu = require('./Sidemenu'); 
var Bulkmail = require('./Bulkmail'); 
var store = require('../stores/store'); 
var api = require('../utils'); 
function getAppState() { 

    return { 
     //result:store.setProfile() 
     result:api.getprofile() 
    } 
} 


var App = React.createClass({ 
    getInitialState:function() { 
     return getAppState(); 
    }, 
    componentDidMount: function(){ 
     Store.addChangeListener(this._onChange); 
    }, 

    componentUnmount: function(){ 
     Store.removeChangeListener(this._onChange); 
    }, 



    render:function() { 
     console.log(this.state); 
     return(
      <div> 
       <Nav/> 
       <Sidemenu/> 
       <Fakeprofile /> 



      </div> 

     ) 
    }, 
    _onChange: function(){ 
     this.setState(getAppState()); 
    } 
}); 

module.exports = App; 

utils.js

var actions = require('./actions'); 

module.exports = { 
    getprofile:function() { 
     console.log('Gettinf data'); 
     var url = 'http://localhost:3000/api/index'; 
     $.ajax({ 
      url:url, 
      dataType:'json', 
      cache:false, 
      success:function success(data) { 
       console.log(data); 



      }, 
      error:function error(xhr,status,err) { 
       console.log(err); 
      } 
     }) 
    } 
}; 

Answer 1

Инициировать Ajax вызова в componentdidmount и после того, как обещание решить установить компонент состояния // App.js

var React = require('react'); 
var Actions = require('../actions'); 
var Store = require('../stores/store'); 
var Nav =require('./Nav'); 
var Fakeprofile = require('./Fakeprofile'); 
var Sidemenu = require('./Sidemenu'); 
var Bulkmail = require('./Bulkmail'); 
var store = require('../stores/store'); 
var api = require('../utils'); 
function getAppState() { 

    return { 


    } 
} 


var App = React.createClass({ 
    getInitialState:function() { 
     return getAppState(); 
    }, 
    componentDidMount: function(){ 
     api.getprofile().then(function(response) { 
      this.setState({ 
        data: response 
      }) 
     }); 
     Store.addChangeListener(this._onChange); 
    }, 

    componentUnmount: function(){ 
     Store.removeChangeListener(this._onChange); 
    }, 



    render:function() { 
     console.log(this.state); 
     return(
      <div> 
       <Nav/> 
       <Sidemenu/> 
       <Fakeprofile /> 



      </div> 

     ) 
    }, 
    _onChange: function(){ 
     this.setState(getAppState()); 
    } 
}); 

module.exports = App; 

var actions = require('./actions'); 

module.exports = { 
    getprofile:function() { 
     console.log('Gettinf data'); 
     var url = 'http://localhost:3000/api/index'; 
     return $.ajax({ 
      url:url, 
      dataType:'json', 
      cache:false, 
      success:function success(data) { 
       console.log(data); 



      }, 
      error:function error(xhr,status,err) { 
       console.log(err); 
      } 
     }) 
    } 
};