jquery – 使用react.js的简单ajax请求

2023年1月30日 218次阅读

我试图显示来自ajax请求的任何数据,在react.js中完成.到目前为止没有快乐….

它试图从测试Web API中提取数据,安装了JQuery,虽然没有必要,但我已经考虑了替代方案,但到目前为止还在努力实现它们.

对于请求我尝试两件事,通过这个和Jquery的append方法绑定数据,两者都不起作用.其他所有内容都会渲染,控制台也不会出现任何错误.

我正在努力寻找一个可以轻松移植到本机反应的泛型函数,但即使在这个JQuery实现中也是如此.

var url = 'https://demo2697834.mockable.io/movies';

//main logic
var GetStuff= React.createClass({

    getInitialState: function() {
      return {
        entries: []
      };
    },

    componentDidMount: function() {
        $.ajax({
          url: 'https://demo2697834.mockable.io/movies',
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({entries: data});
            $('.test').append(data);
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },

    render: function() {
      return (
        <div>{this.state.entries}</div>
      );
    }
});

//markup
<body style={MainStyles.alldivs}>
    <Header />
    <GetStuff/>
    <div class='test'></div>
    {this.props.children}
    <Footer />
</body>

更新1

所以我改变了属性以适应条目声明.没有变化,我试图传递道具URL参数,但也没有变化.我还删除了旧学校JQuery追加,我100％试图加入反应,羞辱它不是一个简单的赛格威过渡.

我是否需要更改服务器配置中的任何内容？我用快递？

更新2

似乎componentDidMount函数根本没有调用,为了节省混淆,我将发布我的完整代码.

import React from 'react';
import ReactDom from 'react-dom';
import $from "min-jquery";
import Header from './header';
import Footer from './footer';
//AJAX request
var GetStuff= React.createClass({
    getInitialState: function() {
      return {
        entries: []
      };
    },
    componentDidMount: function() {
        $.ajax({
          url: 'https://demo2697834.mockable.io/movies',
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({entries: data});
            console.log('success');
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
            console.log('fail');
          }.bind(this)
        });
      },
    render: function() {
      return (
        <div> HERE: 
          {this.state.entries}
        </div>
      );
    }
});


// Stylesheet stuff is here, not important for this post.

//Render
var MasterLayout = React.createClass({ 
    render: function(){
        return(
            <html lang="en">
            <head>
                <title>{this.props.name}</title>
            </head>
            <body style={MainStyles.alldivs}>
                <Header />
                <GetStuff />
                {this.props.children}
                <Footer />
            </body>
            </html>
        )   
    }
});


// no idea if this is the correct setup, again docs are lacking on the real use of this.

    if(typeof window !== 'undefined') {
        ReactDom.reder(<MasterLayout />, document.getElementByID("content"));
    }
    module.exports = MasterLayout;

最佳答案 从我可以看到的是你没有加载任何URL,采取这个：

url: this.props.url,

你没有分配任何名为url的道具.您只在文件顶部指定了名为url的变量.

所以你可以做的是添加以下内容：

<GetStuff url="https://demo2697834.mockable.io/movies" />

另外我注意到你想把这个函数移植到react-native.我不会使用ajax.查看fetch方法…它与ajax非常相似,它是默认情况下对本机使用的反应. https://facebook.github.io/react-native/docs/network.html

您的请求看起来像这样：

fetch(this.props.url, {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  },
}).then (function (response) {return response.json()})
  .then(function (json) {/* Here is your json */})
  .catch(function (error) {/*Handle error*/});

编辑：

嗯……好像你无法访问道具.在componentWillMount中尝试console.log this.props.但我想我知道this.props.url背后的原因在你的ajax函数中没有工作.

this. inside the ajax function refers to the ajax this, and not the react this.

你可以做的是将它绑定到你的ajax函数或将this.props.url赋值给ajax函数之外的变量(这就是我要做的).例子：

componentDidMount: function() {
        var url = this.props.url;
        $.ajax({
            url: url,

顺便说一句,请查看此问题以获取更多详细信息：React tutorial- why binding this in ajax call

编辑2：

我注意到你正在使用简单的反应,没有打字稿或体系结构,如redux.我建议你考虑使用带有es6和redux的babel(它处理与应用程序状态有关的一切,这是必须的！它是一个通量实现).

我暂时没有使用简单的反应,你可能必须设置propTypes然后在你的getInitialState函数中分配道具.

propTypes: {
    url: React.PropTypes.string,
},
getInitialState: function() {
    return {
        url: this.props.url,
    };
}

然后,您可以使用this.state.url访问url值.

点赞