antd组件select下拉数据分页加载

import React, { useState, useRef, useCallback } from "react";
import { Select, Spin } from "antd";const { Option } = Select;
const PAGE_SIZE = 20;// 模拟接口
const fetchUsers = (q, page) =>new Promise((resolve) => {setTimeout(() => {const total = 100; // 假设总条数const start = (page - 1) * PAGE_SIZE;const list = Array.from({ length: Math.min(PAGE_SIZE, total - start) },(_, i) => ({id: start + i + 1,name: `${q || "User"} ${start + i + 1}`,}));resolve({ list, hasMore: start + list.length < total });}, 600);});// 防抖工具
const debounce = (fn, delay) => {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn(...args), delay);};
};const RemoteSelect = () => {const [data, setData] = useState([]);const [value, setValue] = useState([]);const [loading, setLoading] = useState(false);const [hasMore, setHasMore] = useState(true);const [query, setQuery] = useState("");const pageRef = useRef(1);const fetchingRef = useRef(false);// 加载数据const loadData = useCallback(debounce(async (q, page, concat = false) => {if (fetchingRef.current) return;fetchingRef.current = true;setLoading(true);const { list, hasMore: more } = await fetchUsers(q, page);setData((prev) => (concat ? [...prev, ...list] : list));setHasMore(more);setLoading(false);fetchingRef.current = false;}, 300),[]);// 搜索时重置const handleSearch = (q) => {setQuery(q);pageRef.current = 1;setHasMore(true);loadData(q, 1);};// 滚动到底部加载更多const handlePopupScroll = (e) => {const { target } = e;if (hasMore &&!loading &&!fetchingRef.current &&target.scrollTop + target.clientHeight === target.scrollHeight) {pageRef.current += 1;loadData(query, pageRef.current, true);}};return (<Selectmode="multiple"placeholder="请输入关键字搜索"value={value}onChange={setValue}filterOption={false}onSearch={handleSearch}onPopupScroll={handlePopupScroll}notFoundContent={loading ? <Spin size="small" /> : null}style={{ width: 300 }}>{data.map((user) => (<Option key={user.id} value={user.id}>{user.name}</Option>))}{loading && hasMore && (<Option disabled><Spin size="small" /></Option>)}</Select>);
};export default RemoteSelect;

使用

import React from 'react';
import ReactDOM from 'react-dom';
import RemoteSelect from './RemoteSelect';ReactDOM.render(<RemoteSelect />, document.getElementById('root'));