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();  // 获取数据列表
}

 

posted @ 2019-11-08 17:57  那时年少青衫薄。  阅读(729)  评论(0编辑  收藏  举报