如何在react-bootstrap-table-next中检测滚动到底部以获取API新数据

当然可以实现！react-bootstrap-table-next本身并没有内置的onScrollEndReached这类事件，但我们可以通过手动监听表格的滚动容器来检测滚动到底部的动作，进而触发API请求加载新数据。以下是完整的实现方案：

核心思路 #

1. 获取表格的滚动容器元素（组件内部会生成一个可滚动的div）
2. 为该容器添加滚动事件监听
3. 在滚动事件中计算滚动位置，判断是否到达底部
4. 触发API请求加载新数据，同时处理加载状态避免重复请求

完整代码示例（函数组件） #

import BootstrapTable from 'react-bootstrap-table-next';
import { useEffect, useRef, useState } from 'react';

const ScrollLoadTable = ({ initialData }) => {
  // 用于获取表格DOM引用
  const tableRef = useRef(null);
  // 表格数据状态
  const [tableData, setTableData] = useState(initialData);
  // 加载状态，防止重复请求
  const [isLoading, setIsLoading] = useState(false);
  // 当前页码，用于API请求分页
  const [currentPage, setCurrentPage] = useState(1);
  // 是否还有更多数据可以加载
  const [hasMore, setHasMore] = useState(true);

  // 挂载时添加滚动监听，卸载时移除
  useEffect(() => {
    // 获取表格的滚动容器：react-bootstrap-table-next会生成类名为react-bootstrap-table-scroll-body的滚动div
    const scrollContainer = tableRef.current?.querySelector('.react-bootstrap-table-scroll-body');
    if (!scrollContainer) return;

    const handleScroll = () => {
      // 计算滚动位置：scrollTop + 容器可视高度 >= 滚动总高度（留10px误差，避免浏览器渲染偏差）
      const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
      const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 10;

      // 只有当到达底部、不在加载中、还有更多数据时，才触发加载
      if (isScrolledToBottom && !isLoading && hasMore) {
        loadMoreData();
      }
    };

    scrollContainer.addEventListener('scroll', handleScroll);
    // 清理函数：组件卸载时移除监听
    return () => scrollContainer.removeEventListener('scroll', handleScroll);
  }, [isLoading, hasMore]);

  // 加载更多数据的API请求函数
  const loadMoreData = async () => {
    setIsLoading(true);
    try {
      const nextPage = currentPage + 1;
      // 替换成你的实际API地址，传递分页参数
      const response = await fetch(`your-api-endpoint?page=${nextPage}&limit=10`);
      const newData = await response.json();

      if (newData.length === 0) {
        // 没有更多数据了，更新状态
        setHasMore(false);
        return;
      }

      // 合并新数据到现有数据中
      setTableData(prevData => [...prevData, ...newData]);
      setCurrentPage(nextPage);
    } catch (error) {
      console.error('加载更多数据失败:', error);
    } finally {
      // 不管请求成功失败，都结束加载状态
      setIsLoading(false);
    }
  };

  // 定义表格列（根据你的业务需求调整）
  const columns = [
    { dataField: 'id', text: 'ID', sort: true },
    { dataField: 'title', text: '标题' },
    { dataField: 'content', text: '内容' },
    // 更多列...
  ];

  return (
    <div className="table-container">
      <BootstrapTable
        ref={tableRef}
        keyField="id" // 必须设置唯一的keyField
        data={tableData}
        columns={columns}
        // 开启表格滚动：必须设置固定高度，否则不会生成滚动容器
        height="600px"
        // 可选：添加样式类，确保滚动容器正确生成
        wrapperClasses="table-responsive"
        bodyClasses="react-bootstrap-table-scroll-body"
      />
      {/* 加载状态提示 */}
      {isLoading && <div className="loading-text">正在加载更多数据...</div>}
      {/* 没有更多数据的提示 */}
      {!hasMore && !isLoading && <div className="no-more-text">已加载全部数据</div>}
    </div>
  );
};

export default ScrollLoadTable;

关键注意事项 #

• 必须设置表格高度：只有当表格有固定高度时，才会生成可滚动的容器，否则表格会自适应高度，不会出现滚动条
• 滚动容器的选择：react-bootstrap-table-next的滚动区域是类名为react-bootstrap-table-scroll-body的div，通过querySelector可以精准获取
• 避免重复请求：通过isLoading状态控制，确保同一时间只有一个API请求在进行
• 处理无更多数据的情况：当API返回空数据时，设置hasMore为false，后续不再触发加载
• 类组件适配：如果使用类组件，可以通过createRef获取表格DOM，在componentDidMount中添加监听，componentWillUnmount中移除监听，逻辑和函数组件一致

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