antd Select下拉滚动加载

(遇到的需求：使用antd Select选择器时，后端数据量非常大

类似这种：

准备的解决方法：后端数据分页，前端下拉滚动加载

用到的api：

后端接口格式：[[http://localhost:8000/es/list?pageIndex=1&pageSize=10](http://localhost:8000/es/list?pageIndex=1&pageSize=10%5C)]

复制{
  "code": 10000,
    "title": "提示",
      "msg": "OK",
        "data": {
          "pageIndex": 1,
            "pageSize": 10,
              "totalPage": 1,
                "totalRecord": 7,
                  "pageObject": [
                    {
                      "id": "a10",
                      "name": "a10"
                    },
                    {
                      "id": "b11",
                      "name": "b11"
                    },
                    {
                      "id": "c12",
                      "name": "c12"
                    },
                    {
                      "id": "d13",
                      "name": "d13"
                    }
                  ]
        }
}

前端写法：

复制const [list, setList] = useState([]);
const [listIndex, setListIndex] = useState(1);

复制/** 请求 */
const getList = async(params) => {
  try{
    const { data } = await request('es/list', {
      method: 'GET',
      params: {
        pageIndex: listIndex,
        pageSize: 10
      }
    })

    const newList = data?.pageObject ?? [];
    setList(list.concat(newList));

    if(data?.pageIndex == data?.totalPage) { //如果是最后一页
      setListIndex(-1);
    }else{
      setListIndex(listIndex + 1)
    }
  }catch(e){
    console.log(e)
  }
}

useEffect(() => {
  getList();
},[])

复制/** 下拉滚动回调 */
const onPopupScroll = (e) => {
  e.persist();

  const { scrollTop, offsetHeight, scrollHeight } = e.target;

  if(scrollTop + offsetheight === scrollHeight) {
    if(listIndex != -1) {
      getList();
    }
  }
}

复制<Select
style={{ width: 300 }}
placeholder="请选择"
onPopupScroll={onPopupScroll}>
  {list.map(item => {
   const { id } = item;
return (
  <Select.Option key={id} value={id}>
  {id}
</Select.Option> 
)
})}
  </Select>