React分页开发遇'use object destructuring'报错，滚动触底page累加问题

数据老陈

2026-8-13

滚动分页功能的两个问题修复

一、解决「use object destructuring」提示

这是ESLint这类代码检查工具给出的风格优化建议，不是语法错误。它建议你用对象解构简化变量声明，优化后代码更简洁：

你原来单独声明容器属性的写法：

const scrollHeight = vendorContainer.scrollHeight
const scrollTop = vendorContainer.scrollTop
const clientHeight = vendorContainer.clientHeight

可以改成解构写法：

const { scrollHeight, scrollTop, clientHeight } = vendorContainer;

如果不想调整代码，也可以在ESLint配置里关闭prefer-destructuring规则，但更推荐遵循规范优化代码。

二、修复page值递增的逻辑错误

你写的pagination.page += pagination.page + 1逻辑完全错误，会导致page值以0→1→3→7的指数增长，而非预期的每次加1。正确写法任选一种：

pagination.page += 1;
pagination.page++;
pagination.page = pagination.page + 1;

完整修正后的代码

const vendorContainer = document.getElementById('vendorCard')!;
let loadingMore = false;
const pagination = {
  count: 50,
  page: 0
};

vendorContainer.addEventListener('scroll', () => {
  // 用对象解构获取容器属性，解决解构提示
  const { scrollHeight, scrollTop, clientHeight } = vendorContainer;
  
  if(((scrollTop + clientHeight) > scrollHeight - 200) && !loadingMore){
    loadingMore = true;
    // 正确递增page值
    pagination.page += 1;
    
    // 记得在这里添加加载更多数据的逻辑，加载完成后重置loadingMore
    // 示例：
    // fetch(`/api/vendors?page=${pagination.page}&count=${pagination.count}`)
    //   .then(res => res.json())
    //   .then(data => {
    //     // 渲染数据到容器
    //     loadingMore = false;
    //   });
  }
});