最近项目中在使用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 点击分页为上次操作结果的更多相关文章

  1. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  2. react antd 关于selectedRows 的问题

    在table中,经常会用到单选和多选的功.这里会有一个方法, 当触发onchange的时候回有两个数组,[selectedRowKeys, selectedRows],当前选中的keys和每一项, 这 ...

  3. React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

    最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...

  4. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  5. 获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

    获取列表数据时,getList 设置默认参数:getList(page = 1),点击分页及前往时,传page参数,其他使用page的默认值:1

  6. 用js或JQuery模拟点击a标签的操作

    一.用js模拟点击a标签的操作. jsp代码: <a id="login" href="${pageContext.request.contextPath}/log ...

  7. element-ui table 点击分页table滚动到顶部

    在做项目中,碰到一个问题,table加了固定头,内容可滚动,当滚到table底边时,点击分页后还在底边 解决方法:设置table的 ref='multipleTable' //切换分页的方法加上下面这 ...

  8. solr深分页,游标操作分页,解决性能问题

    solr深分页,游标操作分页,解决性能问题 @Test public void pageByCursor() { try { solrServer.connect(); String query = ...

  9. React+Antd遇到的坑

    第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...

随机推荐

  1. css 始终让图片占满自适应盒子(图片不失真)

    要去上班了,时间比较紧,先把代码粘出来,原理慢慢讲 我来了,今天是农历七月八日,昨天是七夕,不知道为什么,突然通知放假半天(嘎嘎),好吧,没什么!!!走到半路的我看到通知,立马撤了.正好回来把这个原理 ...

  2. tcpdump命令介绍

    命令格式为:tcpdump [-nn] [-i 接口] [-w 储存档名] [-c 次数] [-Ae] [-qX] [-r 文件] [所欲捕获的数据内容] 参数: -nn,直接以 IP 及 Port ...

  3. 洛谷P1757 通天之分组背包 [2017年4月计划 动态规划06]

    P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...

  4. Lavavel 程序报错 MassAssignmentException in Model.php line 452: _token

    Lavarel 用类似于下面命令插入数据时候出错 Comment::create($request->all()) 错误页面截图如下: 错误原因:下面这行代码应该写到对应的Model里面,而不是 ...

  5. H5C3--sessionStorage和localStorage的使用

    一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. 机器学习之Adaboost算法原理

    转自:http://www.cnblogs.com/pinard/p/6133937.html 在集成学习原理小结中,我们讲到了集成学习按照个体学习器之间是否存在依赖关系可以分为两类,第一个是个体学习 ...

  7. 高效整洁CSS代码原则(上)

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...

  8. UML时序图(Sequence Diagram)学习笔记

    什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时序 ...

  9. conda 下配置环境

    conda list 查看已有环境(感觉anaconda 中查看的不全,只有指定路径的,但是这个路径和默认创建的路径不一样 然后我发现 要安装traits 库必须要的是PyQt4 但是我的py3下只有 ...

  10. DOM修改元素的方法总结

    今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...