React分页state更新滞后一步，如何解决？Redux或Hooks可行吗？

页码滞后问题是React类组件setState的异步批处理机制导致的：setState不会立刻同步修改this.state的值，只会把更新任务放入队列，在当前执行栈结束后才统一合并更新。当你在setState调用之后立刻同步执行this.getData()时，读到的this.state还是更新前的旧值，就会出现第一次点击下一页，请求携带的还是当前页参数、第二次点击才拉取到上一页数据的滞后现象。
比如handleNextButtonClick的现有逻辑：

handleNextButtonClick= () =>{
  this.setState((prevState)=>{ 
    return{
      ...prevState,      
      query:{
        ...prevState.query,
        paginate: {
          ...prevState.query.paginate,
          page: prevState.query.paginate.page + 1,
        }
      }
    }
  );
  // 这行执行时state还未完成更新，读取到的是旧页码
  console.log('page is ' + this.state.query.paginate.page);
  this.getData();
}

不需要引入第三方库，两种改法即可解决：

方案1：利用setState的更新回调 #

setState支持传入第二个参数，这个回调会在状态真正合并、组件完成重渲染后触发，把调用getData的逻辑挪到回调里，就能保证拿到最新的state值：
修改后的handleNextButtonClick示例：

handleNextButtonClick= () =>{
  this.setState((prevState)=>{ 
    return{
      ...prevState,      
      query:{
        ...prevState.query,
        paginate: {
          ...prevState.query.paginate,
          page: prevState.query.paginate.page + 1,
        }
      }
    }
  // 状态更新完成后再发起数据请求
  , () => {
    this.getData();
  });
}

*同理需要修改的还有handlePrevButtonClick、handleFirstButtonClick、handleLastButtonClick、handleSearchChange、handleFilterChange中所有“更新状态后立刻调用getData”的逻辑，将同步执行的this.getData()挪到setState的回调中即可。

方案2：改造getData为参数接收模式，跳过state读取环节 #

如果不想写多层回调嵌套，可以把getData调整为支持接收外部传入的查询参数。点击分页时，先基于旧state计算好最新的查询对象，直接把参数传给getData发请求，同时同步更新state，完全不依赖“等state更新完成再读取”的时序：
先改造getData方法：

// 改造后的getData，支持接收外部传入的query参数
getData = (queryPayload) => {
  const url = this.state.URL + 'test?'
  // 优先使用传入的参数，未传时回退读取当前state的值
  const query = queryPayload || this.state.query
  Axios.post(url, query).then(result => {
    const pagi = result.data.pop();
    // 合并多次setState为一次，减少重复渲染
    this.setState(prevState => ({
      work_orders: [...result.data],
      query: {
        ...prevState.query,
        paginate: {
          ...prevState.query.paginate,
          totalRows: pagi.totalRows,
          totalPage: pagi.totalPage,
          startIndex: pagi.startIndex,
          endIndex: pagi.endIndex,
        }
      }
    }))
  })
}

再修改handleNextButtonClick逻辑：

handleNextButtonClick= () =>{
  // 基于旧state先计算好最新的查询对象
  const newPage = this.state.query.paginate.page + 1
  const newQuery = {
    ...this.state.query,
    paginate: {
      ...this.state.query.paginate,
      page: newPage
    }
  }
  // 直接用计算好的新参数发请求，同时更新state
  this.setState({query: newQuery})
  this.getData(newQuery)
}

这种写法逻辑更直观，没有异步等待，也能避免多层回调嵌套。

• React Hooks的状态更新机制和类组件本质一致，同样存在异步批处理逻辑：如果还是写“更新page状态后立刻同步发起请求”的逻辑，不管用类组件还是Hooks，都会出现同样的滞后问题。核心矛盾从来不是组件写法的差异，而是读state和更新state的时序错配，只要按照上述两种方式调整逻辑，无论类组件还是Hooks写法，都能解决这类问题。
• Redux的store更新是同步触发reducer的，但如果在dispatch action之后立刻同步读取旧的store值发请求，一样会遇到同样的滞后问题。它本身不会天然解决这类时序问题，只是能把状态管理逻辑从组件中抽离，减少组件内部的状态耦合。

• 原有getData中拆分了两次setState（一次更新分页信息、一次更新工单列表），会触发两次组件重渲染，合并为一次状态更新即可（上述示例中已写好合并后的逻辑）。
• 重写的空componentDidUpdate、空shouldComponentUpdate可以直接删除，减少无意义的代码堆积。
• 代码末尾在CustomPagination函数外重复写了TableList的默认导出语句，会导致模块加载冲突，记得删掉重复的导出逻辑。

内容的提问来源于stack exchange，提问作者Chase