Uncaught TypeError: Cannot read property 'then' of undefined in React ajax Call?

Question

我是 React 的新手 js.I 对在 reactjs 中加载初始数据有点困惑。我很确定我的 ajax 调用正在工作，但我不知道如何处理该数据并将 json 数据操作到我的组件。 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) {
            console.log(response);
            this.setState({
                data:response

            });
        });

        Store.addChangeListener(this._onChange);
    },

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



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



            </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);



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

Answer 1

如果定义了 jQuery，请尝试在 $.ajax() 之前包含 return 语句到 return jQuery 来自 getprofile() 调用 [=15] 的承诺对象=]

getprofile:function () {
      console.log('Gettinf data');
      var url  = 'http://localhost:3000/api/index';
      // add `return` before `$.ajax()` to return jQuery promise
      // from `getprofile()` call
      return $.ajax({
          url:url,
          dataType:'json',
          cache:false,
          success:function success(data) {
              console.log(data);



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

Answer 2

当有 React 本机 Fetch 方法执行此操作时，在 React 中使用 AJAX 对我来说似乎很奇怪。

我就是这样做的。

getProfile: function() {
    fetch('http://localhost:3000/api/index',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
       });

然后在你的 App.js

这就是您的错误所在 - 您需要 return 在 .then.

中做出回应

componentDidMount: function(){
        api.getprofile().then(response => response.json())
        .then( (json => {
            this.setState({
            data: json
        });
    });
}

Uncaught TypeError: Cannot read property 'then' of undefined in React ajax Call?

Uncaught TypeError: Cannot read property 'then' of undefined in React ajax Call?

javascript

ajax

jquery

flux

reactjs