如何在React中检测antd Select组件搜索无结果状态？

问题分析 #

你当前在filterOption中逐个判断选项是否匹配，该逻辑会随每个选项执行一次（若有1000个选项则触发1000次），这是效率低下的核心原因。filterOption仅用于定义单个选项的匹配规则，不适合用来做全局无结果的判断。

最优解决方案 #

通过手动维护过滤后的选项状态+自定义下拉渲染的方式，仅在搜索输入变化时执行一次过滤逻辑，避免重复判断：

1. 用useState维护搜索值和过滤后的选项列表
2. 通过onSearch事件触发过滤逻辑，仅执行一次遍历
3. 利用dropdownRender自定义下拉内容，在无结果时添加UI按钮

代码实现 #

import { useState } from 'react';
import { Select, Button } from 'antd';
const { Option } = Select;

const YourComponent = (props) => {
  const [med, setMed] = useState('');
  const [searchValue, setSearchValue] = useState('');
  const [filteredMeds, setFilteredMeds] = useState(props.medicine.data || []);

  // 处理搜索输入，手动过滤选项
  const handleSearch = (value) => {
    setSearchValue(value);
    // 无搜索值时恢复全部选项
    if (!value.trim()) {
      setFilteredMeds(props.medicine.data || []);
      return;
    }
    const lowerInput = value.toLowerCase();
    // 仅执行一次过滤逻辑
    const filtered = (props.medicine.data || []).filter(medItem => 
      medItem.name.toLowerCase().startsWith(lowerInput)
    );
    setFilteredMeds(filtered);
  };

  const handleChange = (e, type, field) => {
    // 原有的change逻辑
  };

  return (
    <Select
      dropdownAlign={{ offset: [-15, 4] }}
      showSearch
      placeholder="Select a medicine"
      suffixIcon={<img src={arrowdropdown} alt="下拉箭头" />}
      onChange={(e) => handleChange(e, "select", "medicine")}
      onSelect={(e) => setMed(e)}
      onSearch={handleSearch}
      filterOption={false} // 关闭内置过滤，使用自定义逻辑
      value={med}
      className="c_select"
      // 自定义下拉内容，添加无结果时的按钮
      dropdownRender={(menu) => (
        <>
          {menu}
          {/* 仅当有搜索输入且无匹配选项时显示按钮 */}
          {searchValue.trim() && filteredMeds.length === 0 && (
            <div style={{ padding: '8px 16px', textAlign: 'center' }}>
              <Button type="primary" onClick={() => {
                // 此处添加你的按钮点击逻辑，比如打开添加药品弹窗
                console.log("添加新药品");
              }}>
                添加该药品
              </Button>
            </div>
          )}
        </>
      )}
    >
      {/* 渲染过滤后的选项 */}
      {filteredMeds.map((medItem, index) => (
        <Option value={medItem.id} key={index}>
          {medItem.name}
        </Option>
      ))}
    </Select>
  );
};

export default YourComponent;

方案优势 #

• 过滤逻辑仅在搜索输入变化时执行一次，彻底解决原方案多次触发的性能问题
• 通过dropdownRender精准控制无结果UI的显示时机，逻辑清晰易维护
• 关闭内置filterOption后，完全由自定义逻辑控制选项过滤，灵活性更高

内容的提问来源于stack exchange，提问作者Zain Abedin