React Antd Select組件輸入搜索時(shí)調(diào)用接口方式

更新時(shí)間：2025年08月30日 14:23:09 作者：水果攤見

為優(yōu)化Select組件中文輸入時(shí)的接口調(diào)用,使用lodash.debounce實(shí)現(xiàn)防抖,避免每輸入一個(gè)字母即觸發(fā)請(qǐng)求,待用戶點(diǎn)擊空格完成輸入后,再調(diào)用接口獲取數(shù)據(jù),提升性能與用戶體驗(yàn)

前言

由于接口返回較多，需要在Select組件中輸入時(shí)進(jìn)行調(diào)用接口并搜索，而不是初始化時(shí)把全部寫入Option。

問(wèn)題

當(dāng)輸入中文時(shí)，每打一個(gè)字母都會(huì)調(diào)用一次接口，想在中文輸入完成，即點(diǎn)擊空格后再進(jìn)行接口調(diào)用

<Select
     prefix={
         <SearchOutlined
             style={{
                 color: SearchOutlinedColor?.backgroundColor,
             }}
         />
     }
     showSearch
     value={orgValue}
     placeholder={t('Input Search Text')}
     style={{ width: 250 }}
     defaultActiveFirstOption={false}
     suffixIcon={null}
     filterOption={false}
     notFoundContent={null}
     onSearch={handleOrgSearch}
     onChange={handleOrgChange}
     options={orgOptions}
     onCompositionStart={handleCompositionStart}  // 對(duì)中文的處理
     onCompositionEnd={handleCompositionEnd}
     allowClear
     onClear={() => {
         setOrgValue('');
         onOrgSearch('');
         setOrgOptions([]);
     }}
     size="small"
     variant="filled"
 />

引入lodash.debounce

const [orgValue, setOrgValue] = useState();
const [orgOptions, setOrgOptions] = useState([]);
const [isComposing, setIsComposing] = useState(false);
const searchRef = useRef(null);

// 注冊(cè)debouncedRef，輸入結(jié)束后再進(jìn)行接口調(diào)用
const debouncedFetchOrgData = useRef(
    debounce((searchValue) => {
        fetchOrgList(searchValue, setOrgOptions);
    }, 500)
).current;

// 調(diào)用接口，獲取列表，放入option中
const fetchOrgList = (value, callback) => {
    selectCenterInfo({ name: value })
        .then(result => {
            if (result.length) {
                const data = result.map((item) => ({
                    value: item.value,
                    label: `${item.label}(${item.value})`,
                }));
                callback(data);
            } else {
                callback([]);
            }
        })
        .catch(err => {
            console.log(err);
            callback([]);
        });
};

const handleOrgSearch = (newValue) => {
    searchRef.current = newValue;
    if (!isComposing) {
        debouncedFetchOrgData(newValue);
    };
};

const handleOrgChange = (newValue) => {
    setOrgValue(newValue);
    onOrgSearch(newValue);  // 這是傳入組件的props, 用來(lái)把選中的值傳回父組件
};

const handleCompositionStart = () => {  
    setIsComposing(true);
};

const handleCompositionEnd = (e) => {
    setIsComposing(false);
    searchRef.current = e.target.value;
    if (searchRef.current) {
        fetchOrgList(searchRef.current, setOrgOptions);
    }
};

useEffect(() => {
    return () => {
        debouncedFetchOrgData.cancel();
    };
}, [debouncedFetchOrgData]);