最近项目中在使用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. 码云及git使用

    首次使用码云,将本地文件与之关联(创建仓库之后的页面截图) git -- 版本控制(协同开发软件) git add . # 将当前文件下所有内容添加到临时缓存区 git commit -m " ...

  2. idea中HTML格式化时标签缩进问题

    在IntelliJ Idea中HTML格式化时,默认<head><body>以及<body>下的以及标签都不会缩进. 解决方法:editor->code st ...

  3. netbeans7.4 在项目内查找 快捷键 ctrl shift f

  4. day 53

    目录 orm表关系如何建立 django中间件 路由层 反向解析 路由分发 名称空间 伪静态 虚拟环境 django版本的区别 视图层 orm表关系如何建立 ​ 多对多 ​ 一对多 ​ 一对一 ​ 换 ...

  5. 在Mac下安装MySQL

    在Mac下安装MySQL   最近开始将开发工具都转移到 Mac 上了,其中也会莫名其妙的遇到一些坑,不如干脆将整个流程都记录下来,方便以后查找. 下载与安装 首先进入 MySQL 官网,选择免费的C ...

  6. MySQL常见数据库引擎及对比

    一:MySQL存储引擎简介 MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB) ...

  7. hdu 3068 最长回文(manacher入门)

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. 【JZOJ4710】【NOIP2016提高A组模拟8.17】Value

    题目描述 输入 输出 样例输入 5 8 2 10 7 5 1 11 8 13 3 样例输出 27 数据范围 解法 选定一些物品a[1],a[2],a[3]-a[num],尝试交换a[i],a[j],那 ...

  9. python mooc 3维可视化<第一周第一单元>

    基本含义 数据->图像 分类 重点关注空间数据的可视化 方法 二维标量数据场 三维标量数据场 二位标量数据场 颜色映射法 等值线法 立体图法 层次分割法 三维标量数据场 面绘制法 体绘制法 展示 ...

  10. NOIP模拟 17.8.15

    NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...