React useState状态更新未即时同步及页面差异问题咨询

React中useState的状态更新是异步批量执行的，调用setPageSize后，当前渲染周期内的pageSize变量不会立刻更新，所以紧接着打印的自然是旧值。

至于CS页面能正常输出，大概率是写法差异导致的：

• 要么CS页面是通过useEffect监听pageSize变化，等状态真正更新后再执行打印；
• 要么CS页面的打印逻辑直接用了分页回调传入的新参数值，没有依赖状态变量。

错误写法示例（Operate页面） #

import { useState } from 'react';
import { Table } from 'antd';

const OperatePage = () => {
  const [pageSize, setPageSize] = useState(10);

  const handlePageSizeChange = (newPageSize) => {
    setPageSize(newPageSize);
    // 这里pageSize还是旧值，因为setPageSize是异步的
    console.log(`page + new page: ${pageSize} + ${newPageSize}`);
  };

  return (
    <Table
      pagination={{ pageSize, onChange: handlePageSizeChange }}
      // 其他Table配置
    />
  );
};

export default OperatePage;

正确写法示例（CS页面可能的实现） #

import { useState, useEffect } from 'react';
import { Table } from 'antd';

const CSPage = () => {
  const [pageSize, setPageSize] = useState(10);

  const handlePageSizeChange = (newPageSize) => {
    setPageSize(newPageSize);
  };

  // 监听pageSize变化，状态更新后触发打印
  useEffect(() => {
    console.log(`page + new page: ${pageSize} + ${pageSize}`);
  }, [pageSize]);

  return (
    <Table
      pagination={{ pageSize, onChange: handlePageSizeChange }}
      // 其他Table配置
    />
  );
};

export default CSPage;

针对Operate页面的问题，有两种直接可行的修复方式：

1. 用useEffect监听状态更新
   把需要在状态更新后执行的逻辑（比如打印）放到useEffect中，依赖数组添加pageSize，这样每次pageSize更新完成后都会触发这段代码：

   useEffect(() => {
     console.log(`page + new page: ${pageSize} + ${pageSize}`);
   }, [pageSize]);
   

2. 直接使用回调传入的新值
   既然handlePageSizeChange已经拿到了Ant Design Table传入的newPageSize，直接用这个参数拼接打印内容即可，不需要依赖状态变量：

   const handlePageSizeChange = (newPageSize) => {
     setPageSize(newPageSize);
     // 直接用newPageSize，避免依赖未更新的状态
     console.log(`page + new page: ${newPageSize} + ${newPageSize}`);
   };
   

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