reactjs ajax库 推荐,jquery – 使用react.js的简单ajax请求

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

{this.state.entries}

);

}

});

//markup

{this.props.children}

更新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 (

HERE:

{this.state.entries}

);

}

});

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

//Render

var MasterLayout = React.createClass({

render: function(){

return(

{this.props.name}

{this.props.children}

)

}

});

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

if(typeof window !== 'undefined') {

ReactDom.reder(, document.getElementByID("content"));

}

module.exports = MasterLayout;

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

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

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

另外我注意到你想把这个函数移植到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,

编辑2：

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

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

url: React.PropTypes.string,

},

getInitialState: function() {

return {

url: this.props.url,

};

}

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