如何为React-Select组件实现API数据的分页加载功能

要解决React-Select只显示前20条数据的问题，我们可以利用React-Select的滚动事件触发下一页数据加载，同时维护一个累计的选项列表来保存所有已加载的结果。以下是具体实现步骤：

1. 添加必要的状态管理 #

首先在组件中添加几个状态，用于跟踪已加载的选项、加载状态、是否还有更多数据以及当前页码：

import { useState, useEffect } from 'react';

// ... 其他代码

const [allOptions, setAllOptions] = useState([]); // 保存所有已加载的选项
const [isLoading, setIsLoading] = useState(false); // 标记是否正在加载
const [hasMore, setHasMore] = useState(true); // 标记是否还有更多数据
const [currentPage, setCurrentPage] = useState(0); // 当前请求的页码（API从0开始）

2. 实现分页加载逻辑 #

创建一个加载指定页码数据的函数，调用你的API并将新数据追加到已有的选项列表中：

const loadPage = async (page) => {
  setIsLoading(true);
  try {
    // 调用API获取指定页码的数据，这里假设你的getFilteredEntities会返回Promise（需要redux-thunk支持）
    await props.getFilteredEntities(
      search,
      page,
      paginationState.itemsPerPage,
      `${paginationState.sort},${paginationState.order}`
    );

    // 将新加载的人员数据转换为React-Select需要的选项格式
    const newOptions = props.personList.map(spl => ({
      value: spl.perCod,
      label: spl.perName
    }));

    // 追加新选项到已有列表
    setAllOptions(prevOptions => [...prevOptions, ...newOptions]);
    setCurrentPage(page);

    // 判断是否还有更多数据：如果返回的条目数小于每页数量，说明没有更多了
    if (newOptions.length < paginationState.itemsPerPage) {
      setHasMore(false);
    }
  } catch (error) {
    console.error('加载人员数据失败:', error);
  } finally {
    setIsLoading(false);
  }
};

// 初始加载第一页数据
useEffect(() => {
  loadPage(0);
}, []);

// 当搜索条件、排序规则变化时，重置所有状态并重新加载第一页
useEffect(() => {
  setAllOptions([]);
  setCurrentPage(0);
  setHasMore(true);
  loadPage(0);
}, [search, paginationState.sort, paginationState.order]);

3. 配置React-Select组件 #

利用React-Select的onMenuScrollToBottom事件触发加载更多，同时自定义菜单列表组件显示加载状态：

<Row>
  <Col>
    <Select
      id="perCod"
      name="perCod"
      options={allOptions}
      // 当菜单滚动到底部时触发加载下一页
      onMenuScrollToBottom={() => {
        if (!isLoading && hasMore) {
          loadPage(currentPage + 1);
        }
      }}
      // 自定义菜单列表，添加加载提示和无更多数据提示
      components={{
        MenuList: (props) => (
          <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {props.children}
            {isLoading && (
              <div style={{ padding: '8px', textAlign: 'center', color: '#666' }}>
                加载中...
              </div>
            )}
            {!isLoading && !hasMore && (
              <div style={{ padding: '8px', textAlign: 'center', color: '#999' }}>
                已加载全部数据
              </div>
            )}
          </div>
        )
      }}
    />
  </Col>
</Row>

4. 注意事项 #

• Redux异步支持：确保你的Redux配置了redux-thunk中间件，这样getFilteredEntities返回的异步action才能被正确处理，await才能生效。
• 避免重复请求：通过isLoading状态防止在请求未完成时触发新的加载。
• 搜索/排序重置：当搜索关键词或排序规则变化时，需要清空已加载的选项并重新加载第一页，避免数据混乱。

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