react-select AsyncSelect搜索失效与选中值提取问题求助

问题1：搜索未按DeliveryCost过滤，始终显示全部选项 #

问题核心是API请求的参数名与后端接收的字段不匹配——你代码里用了DeliveryCost_like，但返回数据里的字段是deliveryCost（小写开头），这会导致后端无法识别过滤条件，直接返回全部数据。

修改后的loadOptions代码：

const loadOptions = async (searchValue, callback) => {
  const response = await fetch(
    `.../DeliveryCost?deliveryCost_like=${searchValue}&BranchId=${user.BranchId}&Profile=${user.Profile}`,
    {
      headers: {
        Authorization: `Bearer mmm`,
      },
      cache: "no-store",
    }
  );
  const json = await response.json();
  callback(json.map(i => ({ label: i.deliveryCost, value: i.areaId })));
};

问题2：onChange事件获取选中的value值而非完整对象 #

只需在事件处理函数中直接提取value，同时给AsyncSelect配置属性，让组件能正确识别选中值对应的选项：

1. 更新事件处理函数：

const handleSelectDeliveryDd = (event) => {
  setDeliveryDropDown(event?.value || "");
};

2. 修改AsyncSelect组件，添加getOptionValue和getOptionLabel：

<AsyncSelect
  required
  value={DeliveryDropDown}
  onChange={handleSelectDeliveryDd}
  className="basic-single"
  classNamePrefix="select"
  isDisabled={isDisabled}
  isLoading={isLoading}
  isClearable={isClearable}
  isRtl={isRtl}
  isSearchable={isSearchable}
  name="Location"
  loadOptions={loadOptions}
  defaultOptions
  getOptionValue={(option) => option.value}
  getOptionLabel={(option) => option.label}
/>

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