未捕获的类型错误：无法读取 React ajax 调用中未定义的属性“then”？

Posted 2023-02-22

【中文标题】未捕获的类型错误：无法读取 React ajax 调用中未定义的属性“then”？

【英文标题】：Uncaught TypeError: Cannot read property 'then' of undefined in React ajax Call?

【发布时间】：2016-10-28 16:27:50

【问题描述】：

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

【问题讨论】：

jQuery 是在哪里定义的？

在 index.html 文件中定义的 jquery 并且 Ajax 正在工作但我不知道如何处理该数据

$.ajax() 不是从getprofile() 调用返回的？

@charlietfl 是的，先生，那是我的错误

$.ajax() 正在返回 json 数据。

【参考方案1】：

如果定义了 jQuery，请尝试在 $.ajax() 之前包含 return 语句以从 getprofile() 调用返回 jQuery 承诺对象

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

【讨论】：

是的宾果游戏！数据正在获取但现在这发生了TypeError: this.setState is not a function

不要在success 上使用.bind()，而是尝试使用$.ajaxSetup() 将context 的$.ajax() 调用设置为setState 是方法的对象。 $.ajaxSetup(context:/* object to set as this for $.ajax() */)，另外，尝试使用.then() 来处理响应而不是success return $.ajax( url:url, dataType:'json', cache:false)

您是否尝试将this 设置为App $.ajax() 在module.exports = getprofile:function () 内调用？

其实我忘记绑定componentdidmount里面的数据了

【参考方案2】：

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

这就是我的做法。

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

然后在你的 App.js 中

这是您的错误所在 - 您需要在 .then 中返回响应。

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