Antd+Select分页请求

react项目使用Antd，场景需要Select 下拉请求数据，接口涉及分页请求, 以下数据使用dva，modal

import React, { useState } from 'react';
import { Select, Spin } from 'antd';
import { debounce } from 'lodash';

const Test = (props) => {
    // data 从请求返回得出
    const { data, total, pageIndex, pageSize } = props;
    const [value, setValue] = useState('');

    const scrollEnd = (e) => {
        e.persist();
        const { target } = e;
        // 滚动 触底 看接口是否还有剩余的值没传过来
        if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
            if (pageIndex * pageSize < total) {
                // 请求 fetch({ pageIndex: pageIndex + 1 })
            }
        }
    }
    
    // 搜索条件，需要页码置1
    const searchData = (val) => {
        // 请求 fetch({ val, pageIndex: pageIndex + 1 })
    }

    return (
        <Select
            loading={loading}
            showSearch
            onPopupScroll={scrollEnd}
            onSearch={debounce(searchData, 500)} // 防止频繁出发请求
            onChange={(_, { children }) => setValue(children)}
        >
            {data.map((item) => {
                return (
                    <Select.Option key={item} value={item}>
                        {item}
                    </Select.Option>
                )
            })}
            {loading && (
                <Select.Option value="loading" style={{ textAlign: 'center' }}>
                    <Spin spinning />
                </Select.Option>
            )}
    )
}