最近项目中在使用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(); // 获取数据列表 }