React切换pageSize时状态滞后问题求助

问题根源有两个：一是useMemo的依赖数组不完整，二是切换pageSize时未同步重置currentPage，导致状态不同步和数据计算滞后。

1. 补全useMemo的依赖数组 #

你的currentPaginationData计算依赖currentPage、pageSize和blogs.posts，但原代码只把currentPage放进了依赖数组。当pageSize变化时，useMemo不会重新执行计算，自然拿不到新的分页数据。

修改后：

const currentPaginationData = useMemo(() => {
  const start = (currentPage - 1) * pageSize; // 简化计算逻辑，整数运算无需Math.floor
  const end = start + pageSize;
  // slice方法在end超出数组长度时会自动取到末尾，无需额外判断
  return blogs.posts.slice(start, end);
}, [currentPage, pageSize, blogs.posts]); // 补全所有依赖项

2. 切换pageSize时重置currentPage #

当用户切换每页条数时，当前页码可能不再适配新的分页规则（比如原pageSize=15、currentPage=3，总数据40条；切换到pageSize=25后，总页数仅为2，currentPage=3就超出范围了）。所以在更新pageSize的同时，必须把currentPage重置为1，保证状态同步：

const updateRowsPerPage = (rows) => {
  setPageSize(parseInt(rows));
  setCurrentPage(1); // 切换每页条数时重置页码到第一页
};

完整修改后的代码 #

const PAGE_SIZES = [15, 25, 50, 100];
function BlogList() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  
  const updatePage = (pageNum) => {
    setCurrentPage(parseInt(pageNum));
  }; 
  
  const updateRowsPerPage = (rows) => {
    setPageSize(parseInt(rows));
    setCurrentPage(1); // 新增：重置页码
  };
  
  const currentPaginationData = useMemo(() => {
    const start = (currentPage - 1) * pageSize;
    const end = start + pageSize;
    return blogs.posts.slice(start, end);
  }, [currentPage, pageSize, blogs.posts]); // 补全依赖
}

这样修改后，切换pageSize时会立刻重置页码并重新计算分页数据，彻底解决状态滞后的问题。

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