我正在尝试显示来自 ajax 请求的任何数据，在react.js 中完成。到目前为止还没有快乐......
它试图从测试 Web API 中提取数据，已安装 JQuery，虽然不是必需的，但我已经研究了替代方案，但到目前为止很难实现它们。
对于请求，我正在尝试两件事，通过此方法绑定(bind)数据并使用 Jquery 的附加方法，两者都不起作用。其他所有内容都会呈现，并且控制台不会输出任何错误。
我正在尝试开发一个可以轻松移植到react-native的通用函数，但即使在这个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
所以我更改了属性以适应条目声明。没有改变，我尝试传入 props URL 参数，但也没有改变。我还删除了旧式的 JQuery 附加，我 100% 尝试加入 React，可惜这不是一个简单的 segway 过渡。
我需要更改服务器配置中的任何内容吗？我用的是 express ？
更新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 的 Prop 。您仅在文件顶部分配了一个名为 url 的变量。
所以你可以做的就是添加一些类似的内容:
<GetStuff url="https://demo2697834.mockable.io/movies" />
我还注意到您想将此函数移植到react-native。我不会为此使用ajax。查看 fetch 方法...它与 ajax 非常相似，并且是 React Native 默认使用的方法。 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*/});
编辑:
嗯...看来您无法访问 Prop 。尝试在 componentWillMount 中使用 console.log this.props 。但我想我知道 this.props.url 在您的 ajax 函数中不起作用的原因。
this. inside the ajax function refers to the ajax this, and not the react this.
您可以做的是将其绑定(bind)到您的ajax函数或将this.props.url分配给ajax函数外部的变量(这就是我要做的)。示例:
componentDidMount: function() {
var url = this.props.url;
$.ajax({
url: url,
顺便说一句，请查看此问题以了解更多详细信息:React tutorial- why binding this in ajax call
编辑2:
我注意到你使用的是普通的 React，没有 typescript 或 redux 等架构。我建议您考虑将 babel 与 es6 和 redux 结合使用(它处理与应用程序状态有关的所有内容，这是必须的!它是一个 Flux 实现)。
我有一段时间没有使用普通的 React，你可能必须设置 propTypes，然后在 getInitialState 函数中分配 props。
propTypes: {
url: React.PropTypes.string,
},
getInitialState: function() {
return {
url: this.props.url,
};
}
然后您可以使用 this.state.url 访问 url 值。
关于jquery - 使用react.js 进行简单的ajax 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36783443/