React中的Ajax
React中的Ajax
组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount
方法设置Ajax请求,等到请求成功,再用this.setState
方法重新渲染UI。
var UserGist = React.createClass({
getInitialState(){
return {
username:'',
lastGistUrl:''
};
},
componentDidMount(){
$.get(this.props.source,function(result){
var lastGist = result[0];
if(this.isMounted()){
this.SetState({
userName:lastGist.owner.login,
lastGistUrl:lastGist.html_url
})
}
}.bind(this));
},
render(){
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
)
}
})
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
)
上面代码使用jQuery完成了Ajax请求,这是为了便于说明。React本身没有任何依赖,完全可以不用jQuery,而使用其他库。
我们甚至可以把一个Promise对象传入组件。
ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.body
)
上面代码从Github的API抓取数据,然后将Promise对象作为属性,传给RepoList
组件。
如果Promise对象正在抓取数据(pending状态),组件显示“正在加载”;如果Promise对象报错(rejected状态),组件显示报错信息;如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
},
componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
},
render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
React中的Ajax的更多相关文章
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- React 中的 AJAX 请求:获取数据的方法
React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...
- react中使用Ajax请求(axios,Fetch)
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
- 6、react中的交互
1.ajax 再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的 ...
- react中键盘enter事件处理
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...
- react中使用redux简易案例讲解
为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...
- React中的fetch请求相关
fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象 ...
- React中setState的怪异行为 ——setState没有即时生效
setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...
- react中 如何异步展示后台接口的提示消息
调用接口后,后台会返回这样的一段信息提示:{"errCode":400002,"errMsg":"字段校验异常","data&qu ...
随机推荐
- jquery下拉框应用
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- scala入门基础学习
1.Scala基础语法 区分大小写 类名 - 对于所有的类名的第一个字母要大写.如果需要使用几个单词来构成一个类的名称,每个单词的第一个字母要大写. 方法名称 - 所有的方法名称的第一个字母用小写. ...
- NLP杂点
1.停用词 stop words: 在处理自然语言数据(或文本)之前或之后会自动过滤掉某些字或词. 停用词都是人工输入.或者由一个停用词表导入. 2.jieba是目前最好的 Python 中文分词组件 ...
- CHI统计方法度量特征词和类别之间的相关度
其中, A:包含特征词w且属于类别c的文档频数 B:包含特征词w但不属于类别c的文档频数 C:属于类别c但不包含特征词w的文档频数 D:既不属于c也不包含特征词w的文档频数 N:文档总数 CHI统计方 ...
- The linux command之高级键盘技巧
一.光标移动 二.修改文本 三.剪切和粘贴文本 四.使用历史命令
- a^a^a^a^a^a^a^a^a
a^a^a^a是从前向后算,也就是a^(a^3)
- linux dmesg命令使用
linux dmesg命令使用 2012-11-27 09:37 2783人阅读 评论(0) 收藏 举报 分类: linux内核与编程(199) 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- [JZOJ1901] 【2010集训队出题】光棱坦克
题目 题目大意 给你个平面上的一堆点,问序列\({p_i}\)的个数. 满足\(y_{p_{i-1}}>y_{p_i}\)并且\(x_{p_i}\)在\(x_{p_i-1}\)和\(x_{p_i ...
- SQL Server Download
{ https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads }
- Unity 手机屏幕适配
////如有侵权 请联系我进行删除 email:YZFHKM@163.com 1.游戏屏幕适配 屏幕适配是为了让我们的项目能够跑在各种电子设备上(手机,平板,电脑) 那么了解是适配之前首先要了解两个知 ...