如何將ajax數據傳遞給React組件？

Question

我是新來反應js.我只是通過ajax獲取數據並操作component.But中的數據。但總是我越來越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); 
      } 
     }) 
    } 
};