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. 资源文件, ...
随机推荐
- XML解析器之JAXP与DOM4J
XML是一种数据格式,那么需要对XML文件进行操作就需要用到XML解析器---------针对dom方式和sax方式提供了不同的解析技术-----需要不同的XML解析器 dom方式:会把文档中所有元素 ...
- python基础--迭代器、生成器、内置函数、面向对象编程
迭代器:迭代器对象从集合的第一个元素开始访问,直到所有的元素都被访问完结束.迭代器只能往前不会后退 迭代:更新换代(重复)的过程,每次的迭代都必须基于上一次的结果 迭代器:迭代取值的工具 使用迭代器的 ...
- Python网络爬虫与信息提取[request库的应用](单元一)
---恢复内容开始--- 注:学习中国大学mooc 嵩天课程 的学习笔记 request的七个主要方法 request.request() 构造一个请求用以支撑其他基本方法 request.get(u ...
- 洛谷P1967 [NOIP2013提高组Day1T2]货车运输
P1967 货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过 ...
- web前端学习(二)html学习笔记部分(8)--服务器推送事件3
1.2.22 html5服务器推送事件 1.2.22.1 html5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实 ...
- SpringCloud 融入 Python - Tornado
前言 该篇文章分享如何将Python Web服务融入到Spring Cloud微服务体系中,并调用其服务,Python Web框架用的是Tornado 构建Python web服务 引入py-eure ...
- 为什么要用Spring的依赖注入
最近写了一些Spring项目,用到了依赖注入,但是不知道为甚么要用,后来在知乎上看了一些大家的回答,觉得很精辟,遂简单总结一下. 主要是实现类之间的解耦,假如A类依赖B类,在实例化A类的话也要new一 ...
- 如何用maven tycho构建自己的Eclipse RCP应用
在你写了一个Eclipse插件之后,也许你就会想如何把它变成一个P2的项目或者是一个Java App让大家可以安装到自己的Eclipse上,dangdangdang~~ 这是你就可以利用maven-t ...
- Nginx设置静态页面压缩和缓存过期时间的方法 (转)
使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css, ...
- maven的配置和使用
Maven 简介 1.1 Maven 是什么 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.2 为什么使用Maven ...