react+antd 点击分页为上次操作结果
最近项目中在使用antd的分页组件时发生了第一次点击分页无变化,再次点击时数据为上一次的分页结果,代码如下:
setPageIndex = (pagination)=> {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager, // 设置当前页
});
this.getList(); // 获取数据列表
}
在确认代码无误之后查阅react相关资料发现 :
通过this.setState({}) 进行赋值时不能保证是同步进行的。
于是通过修改代码使用asnyc + await 规避掉此问题:
setPageIndex = async (pagination)=> {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
await this.setState({
pagination: pager, // 设置当前页
});
this.getList(); // 获取数据列表
}
react+antd 点击分页为上次操作结果的更多相关文章
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- react antd 关于selectedRows 的问题
在table中,经常会用到单选和多选的功.这里会有一个方法, 当触发onchange的时候回有两个数组,[selectedRowKeys, selectedRows],当前选中的keys和每一项, 这 ...
- React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。
最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...
- 基于webpack+react+antd 项目构建
工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...
- 获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1
获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1
- 用js或JQuery模拟点击a标签的操作
一.用js模拟点击a标签的操作. jsp代码: <a id="login" href="${pageContext.request.contextPath}/log ...
- element-ui table 点击分页table滚动到顶部
在做项目中,碰到一个问题,table加了固定头,内容可滚动,当滚到table底边时,点击分页后还在底边 解决方法:设置table的 ref='multipleTable' //切换分页的方法加上下面这 ...
- solr深分页,游标操作分页,解决性能问题
solr深分页,游标操作分页,解决性能问题 @Test public void pageByCursor() { try { solrServer.connect(); String query = ...
- React+Antd遇到的坑
第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...
随机推荐
- Amazon EBS的功能更新
Amazon EBS(Elastic Block Store.简称EBS) 为 Amazon EC2 实例提供块级存储服务.EBS 卷须要通过网络訪问,而且能独立于实例的生命周期而存在.也就是说假如E ...
- css不定高图文垂直居中的三种方法
html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...
- 洛谷P1757 通天之分组背包 [2017年4月计划 动态规划06]
P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...
- input只能输入数字和小数点,并且只能保留小数点后两位 - CSDN博客
1.给文本框添加一个onkeyup=’clearNoNum(this)’点击事件 2.建立clearNoNum方法 function clearNoNum(obj) { obj.value = obj ...
- CommonJS、requirejs、ES6的对比
文件路径 首先先搞清楚文件路径的写法,这里我总是记不住,有点晕,正好这次整理一下. 以 / 为起始,表示从根目录开始解析: 以 ./ 为起始,表示从当前目录开始解析: 以 ../ 为起始,表示从上级目 ...
- ant详细介绍
Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令 ...
- web前端学习(二)html学习笔记部分(10)-- HTML5构建应用布局和页面
1.2.25 HTML5构建应用布局和页面 1.2.25.1 HTML5在移动开发中的准则 1.尽量使用单页面开发 2.慎重选择前端UI框架 3.动画.特效使用准则(60fps) 浏览器消耗最小的 ...
- C#和JS交互 WebBrowser实例
本文实现了WebBrowser的简单例子 1.引用System.Windows.Froms.dll 2.引用WindowsFormsIntegration.dll 代码如下: public parti ...
- 如何成功安装旧版本火狐,成功安装firebug
1.下载一个老版本火狐浏览器: 历史版本下载 2.下载安装完成后,立即在火狐浏览器的选项设置里面把自动更新关闭 3.手动安装firebug:最后搜到可以下载成功的地址:http://www.onlin ...
- Git.之.安装
Git.之.安装 参考Git官网: https://git-scm.com/book/zh/v2 我这里安装的是Window,浏览官文中的安装,如下截图(点击标红的下载) 下载好软件后,双击软件,下一 ...