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. 资源文件, ...
随机推荐
- htmlunit第一个爬虫演示 目标网址http://ent.sina.com.cn/film/
基本都要放弃了 springmvc 配置了htmlunit之后无法运行,都不能正常实例化webclient,但是突然想起来用maven应用程序测试一下 结果竟然就可以了.好吧,还是有希望的 大佬博客 ...
- 开户项目的sql查询语句备查
查询全国所有的券商名录 SELECT id,security,province,city,borough FROM t_security GROUP BY security ; 查询某个省份的所有券商 ...
- Spring Boot Redis 集成配置(转)
Spring Boot Redis 集成配置 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ede ...
- linux源码安装
以安装xxx.tar.gz为例: 源码存放位置:/usr/local/src/ 安装路径:/usr/local/xxx/ 配置文件存放位置:/usr/local/xxx/etc/ 可执行文件存放位置: ...
- JZOJ 平衡的子集
Description 夏令营有N个人,每个人的力气为M(i).请大家从这N个人中选出若干人,如果这些人可以分成两组且两组力气之和完全相等,则称为一个合法的选法,问有多少种合法的选法? Input 第 ...
- SSH 相关基础
检查是否安装: sudo apt-cache policy openssh-client sudo apt-cache policy openssh-server 也可直接用 sudo apt-ca ...
- Oracle 行转列及列转行
参考网址:http://blog.163.com/fushahui_1988@126/blog/static/82879994201192844355174/ 一.多行转一列select id, vn ...
- querySelector与getElementBy系列的区别
getElementBy系列 document.getElementsByTagName('tag'); document.getElementById('id'); document.getElem ...
- SSM+Maven+IDEA增删改查
开发工具 IntelliJ IDEA Apache-tomcat-9.0 JDK 1.8 MySQL 8.0.11 Maven 3.5.4 IDEA+Maven搭建项目骨架 1. 新建Maven项目: ...
- SQLServer —— EXISTS子查询
一.删除数据库 use master go if exists (select * from sysdatabases where name = 'Demo') drop database Demo ...