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

Posted 2023-02-22

【中文标题】如何将 ajax 数据传递给 React 组件？

【英文标题】：How to pass ajax data to React component?

【发布时间】：2016-10-28 15:20:05

【问题描述】：

我是反应 js 的新手。我只是通过 ajax 获取数据并操作组件中的数据。但我总是不确定。我知道我的 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);
          
      )
  
;

【参考方案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);
          
      )
  
;

【讨论】：

idea 是在您从 utils.js 获取的 componentDidmount 中设置数据

对不起先生，但我是 React Js 的新手。我还在学习这些东西。请完整代码

我没有您尝试设置的确切业务逻辑。请详细说明

我试过的东西但是它抛出了一个错误Uncaught TypeError: Cannot read property 'then' of undefined

我建议您使用 axios 或 fetch 来进行 api 调用，并在您履行承诺后调用设置状态。