求助如何将antdv的select demo用BasicForm实现？

[klgd]

https://antdv.com/components/select-cn 中的搜索用户

<template>
  <a-select
    v-model:value="state.value"
    mode="multiple"
    label-in-value
    placeholder="Select users"
    style="width: 100%"
    :filter-option="false"
    :not-found-content="state.fetching ? undefined : null"
    :options="state.data"
    @search="fetchUser"
  >
    <template v-if="state.fetching" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue';
import { debounce } from 'lodash-es';
let lastFetchId = 0;

const state = reactive({
  data: [],
  value: [],
  fetching: false,
});

const fetchUser = debounce(value => {
  console.log('fetching user', value);
  lastFetchId += 1;
  const fetchId = lastFetchId;
  state.data = [];
  state.fetching = true;
  fetch('https://randomuser.me/api/?results=5')
    .then(response => response.json())
    .then(body => {
      if (fetchId !== lastFetchId) {
        // for fetch callback order
        return;
      }
      const data = body.results.map(user => ({
        label: `${user.name.first} ${user.name.last}`,
        value: user.login.username,
      }));
      state.data = data;
      state.fetching = false;
    });
}, 300);

watch(state.value, () => {
  state.data = [];
  state.fetching = false;
});
</script>

以下是我用BaseForm实现的，在输入内容后，spin一直转，chrome控制台一直报[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. 错误，把chrome都卡死了，不知道是哪里的问题

const state = reactive({
  data: [],
  value: [],
  fetching: false,
});

const schemas: FormSchema[] = [
  {
    field: 'user',
    component: 'Select',
    label: '搜索用户',
    colProps: {
      span: 14,
      offset: 2,
    },
    componentProps: {
      // options: state.data,
      showSearch: true,
      onSearch: (e) => {
        console.log(e)
        fetchUser(e)
      },
      notFoundContent: null,

    },
    // renderComponentContent: () => {
    //   return {
    //     notFoundContent: () => '11',
    //   };
    // }
    // required: true,
  }
];

let lastFetchId = 0;

const fetchUser = debounce(value => {
  console.log('fetching user', value);
  lastFetchId += 1;
  const fetchId = lastFetchId;
  // state.data = [];
  // state.fetching = true;
  updateSchema({
    field: 'user',
    componentProps: {
      notFoundContent: h(
            Spin,
            {
              size: 'small'
            }
          )
    },
    // renderComponentContent: (renderCallbackParams) => {
    //   return {
    //     notFoundContent: () => h(
    //         Spin,
    //         {
    //           size: 'small'
    //         }
    //       )
    //   }
    // },
  })
  fetch('https://randomuser.me/api/?results=5')
    .then(response => response.json())
    .then(body => {
      if (fetchId !== lastFetchId) {
        // for fetch callback order
        return;
      }
      const data = body.results.map(user => ({
        label: `${user.name.first} ${user.name.last}`,
        value: user.login.username,
      }));

      console.log(data)
      updateSchema({
        field: 'user',
        componentProps: {
          options: data,
          notFoundContent: undefined,
        }
      })
      
      // state.data = data;
      state.fetching = false;
    });
}, 300);