React中删除收藏夹条目后如何自动更新页面解决分页空白问题

你遇到的现象本质是删除操作触发后仅更新了分页总页数，未同步修正当前激活的页码值：当你在第2页删除该页所有条目后，总页数从2变为1，但代码中记录当前页码的变量仍为2，此时请求/渲染的仍是不存在的第2页数据，自然返回空结果导致页面空白，分页器也不会激活第1页选项。
手动刷新后恢复正常，是因为页面重新初始化时当前页码默认重置为1，会主动请求第1页的有效数据。

在删除条目的逻辑末尾新增页码合法性校验即可自动修复该问题，通用逻辑如下：

• 每次删除操作执行完成、更新完总收藏条数后，先计算当前的最大合法总页数
• 校验当前页码是否大于最大合法总页数，若符合条件则修正当前页码为最大合法值，再重新请求列表数据
• 额外处理总条数为0的兜底场景，避免出现页码为0的异常请求

以下是参考代码示例：

// 收藏删除请求完成后执行以下逻辑
const pageSize = 10 // 替换为你实际的每页展示条数
const totalPage = Math.ceil(totalFavCount / pageSize)

// 页码合法性校验
if (currentPage > totalPage) {
  // 总页数大于0时修正为最大页码，总页数为0时重置为1
  currentPage = totalPage > 0 ? totalPage : 1
  // 触发列表数据重新拉取/前端分页重新计算
  getFavList()
}

如果你使用的是Element UI、Ant Design等第三方组件库的分页组件，只需确保你绑定的currentPage变量是框架的响应式变量，修改后会自动同步到分页组件的激活状态，无需手动操作DOM修改分页器样式。

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