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 3 - setState()


下一篇:React Hook 概述