Question

我试图显示来自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;

Answer 1

从我能看到的是你没有加载任何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,

BTW，请查看此问题以获取更多详细信息：React tutorial- why binding this in ajax call

编辑2：

我注意到你使用简单的反应，没有打字稿或体系结构，如redux。我建议您考虑使用babel with es6和redux（它处理与应用状态有关的一切，它是必须的！它是一个助推器实现）。

我暂时没有使用简单的反应，你可能需要设置propTypes然后在你的getInitialState函数中分配道具。

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

然后，您可以使用this.state.url访问网址值。

Answer 2

这是我的工作示例代码。请在.bind（this）中正确引用语法，这在您的代码中是不正确的。

<div id="element"></div>
<script type="text/jsx">

 var JavaEEWSTest = React.createClass({
                getInitialState: function () {
                    return {text: ''};
                },
                componentDidMount: function(){
                    $.ajax({
                        url: "http://localhost:8080/RestWeb/rest/city"
                    }).then(function(data) {
                        console.log(data.City.city);
                        this.setState({text: data.City.city});
                    }.bind(this))
                },
                render: function() {
                    return <div>Response - {this.state.text}</div>;
                }
            });

使用react.js的简单ajax请求

2 个答案:

编辑：

编辑2：