如何结合useQuery与React Async Select实现数据查询

React Async Select的loadOptions支持返回Promise的函数，结合RTK Query的useLazyQuery可以完美适配异步搜索场景，替代普通API调用的方式，同时利用RTK Query的缓存、状态管理等特性。

实现代码 #

import React from 'react';
import AsyncSelect from 'react-select/async';
import { useLazyQuery } from '@reduxjs/toolkit/query/react';
// 导入你用RTK Query定义的查询接口
import { searchSomethingFromAPI } from '../services/yourApiSlice';

const AsyncSelectWithRTKQuery = () => {
  // 使用useLazyQuery手动触发查询，而非组件挂载即执行
  const [triggerSearch, { data, isLoading, error }] = useLazyQuery(searchSomethingFromAPI);

  // 适配AsyncSelect的loadOptions，返回Promise
  const loadOptions = async (inputValue) => {
    try {
      // 触发查询，传入用户输入的参数，unwrap()获取原始响应数据
      const response = await triggerSearch({ keyword: inputValue }).unwrap();
      // 按照业务逻辑过滤结果
      return response.data.filter(item => item.name);
    } catch (err) {
      console.error('搜索出错:', err);
      return [];
    }
  };

  return (
    <AsyncSelect
      cacheOptions
      loadOptions={loadOptions}
      defaultOptions
      isLoading={isLoading} // 同步RTK Query的加载状态到组件
    />
  );
};

export default AsyncSelectWithRTKQuery;

关键说明 #

1. 选择useLazyQuery而非useQuery：因为AsyncSelect是在用户输入时才需要触发搜索，useLazyQuery允许我们手动控制查询时机，更符合场景需求。
2. 适配loadOptions的Promise形式：RTK Query的triggerSearch返回Promise，通过await和unwrap()可以直接获取数据，无需回调函数，解决了原问题中refetch不支持回调的限制。
3. 复用RTK Query的状态：可以直接将isLoading、error等状态同步到AsyncSelect组件，无需自己维护加载、错误状态。

原普通API调用实现对比 #

你之前通过普通函数调用的方式也能实现功能，但改用RTK Query后，可以省去手动处理Promise回调、缓存管理、重复请求拦截等逻辑，同时享受RTK Query内置的状态管理能力。

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