antd 封装select输入后自动搜索 显示option 组件

框架自带的 自动搜索 有BUG 用 select 组件 封装

子组件

import _ from lodash
import {
          
    Select, Empty } from antd;
import React, {
          
    useState, useEffect } from react;
import {
          
    PeopleDropList } from @/services/admin;

const SelectRemoteSearch = (props) => {
          
   

  const {
          
    onSelect, requestData = {
          
   }, placeholder } = props
  const {
          
    Option } = Select;
  const [peopleDropList, setPeopleDropList] = useState([]);

  const fetch = (value) => {
          
   
    PeopleDropList({
          
   
      QueryClause: value,
      ...requestData,
    }).then(res => {
          
   
      if (res) {
          
   
        if (res.ReturnCode == 1001) {
          
   
          let list = [];
          !!res.PeopleDropList && res.PeopleDropList.map(item => {
          
   
            list.push({
          
   
              Label: `${
          
   item.PersonName} ${
          
   item.Label ? ( + item.Label + ) : }`,
              Value: item.Value,
              StaffCode: item.StaffCode,
              Id: `${
          
   item.PersonName} ${
          
   item.Label ? ( + item.Label + ) : }`,
              Function: item.Function,
              Email: item.Label,
              Name: item.PersonName,
              Level: item.Level,
            });
          });
          setPeopleDropList(list);
        };
      };
    })
  };

  const handleChange = (value, option) => {
          
   
    onSelect && onSelect(value, option);
  };

  const handleSearch = (value) => {
          
   
    searchDebounce(value);
  };

  const searchDebounce = _.debounce(fetch, 500); // 防抖

  return (
    <Select
      showSearch
      allowClear
      showArrow={
          
   true}
      filterOption={
          
   false}
      onChange={
          
   handleChange}
      onSearch={
          
   handleSearch}
      style={
          
   {
          
    width: 100% }}
      placeholder={
          
   placeholder}
      defaultActiveFirstOption={
          
   false}
      notFoundContent={
          
   null}
    >
      {
          
   !!peopleDropList && peopleDropList.map(item => {
          
   
        return <Option value={
          
   item.Value} key={
          
   item.Value} optiondata={
          
   item}>{
          
   item.Label}</Option>;
      })}
    </Select>
  );
};

export default SelectRemoteSearch;

父组件
import SelectRemoteSearch from @/components/SelectRemoteSearch;


  const onSelect = (value, option) => {
          
   
    if (!!option) {
          
   
      let data = option.optiondata;
      form.setFieldsValue({
          
   
        StudentName: data.Name,
        Email: data.Email,
        Function: data.Function,
        Level: data.Level,
      });
      setStaffCode(data.StaffCode);
    } else {
          
   
      form.setFieldsValue({
          
   
        StudentName: ,
        Email: ,
        Function: ,
        Level: ,
      });
      setStaffCode();
    };
  };

			 <Form.Item
                label="Name"
                name=StudentName
                rules={
          
   [{
          
    required: true, message: Please Select Name }]}
              >
                <SelectRemoteSearch
                  placeholder={
          
   Name}
                  onSelect={
          
   onSelect}
                />
              </Form.Item>
···