Question

我是新来回应js.I我只是通过ajax获取数据并操纵组件中的数据。但是我总是得到undefined。我知道我的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

在componentdidmount中启动Ajax调用，并在解析promise后设置组件状态 // 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);
          }
      })
  }
};

如何将ajax数据传递给React组件？

1 个答案: