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