antd select组件懒加载，后台搜索_antd select懒加载

import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import axios from 'axios';
 
export default function () {
    const limit = 10;
    const [options, setOptions] = useState([]);
    const [offset, setOffset] = useState(0);
    const [total, setTotal] = useState(0);
    const [searchValue, setSerachValue] = useState(null);
 
    function getData() {
        axios.get('./data.json').then(function (res) {
            let data = [...options];
            data = data.concat(res.data.rows);
            setOptions(data);
            setTotal(res.data.total);
        });
    }
 
    useEffect(()=>{
        getData();
    },[searchValue, offset]);
 
 
    return (
        <Select
            showSearch
            allowClear
            options={options}
            onDropdownVisibleChange={(open)=>{console.log(open); if (open) getData()}}
            onPopupScroll={(e)=>{
                const { target } = e;
                if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
                    if (total > offset + limit) setOffset(offset + limit);
                }
            }}
            onSearch={(newVlaue)=>{
                setSerachValue(newVlaue);
                setOffset(0);
                setOptions([]);
            }}
        />
    );
}

data.json

{
  "total": 61,
  "rows": [
    {"key": 1, "value": "选项1"},
    {"key": 2, "value": "选项2"},
    {"key": 3, "value": "选项3"},
    {"key": 4, "value": "选项4"},
    {"key": 5, "value": "选项5"},
    {"key": 6, "value": "选项6"},
    {"key": 7, "value": "选项7"},
    {"key": 8, "value": "选项8"},
    {"key": 9, "value": "选项9"},
    {"key": 10, "value": "选项10"}
  ]
}