React-select/async 不显示API返回选项无法过滤选择的问题

你的代码存在3个核心错误，直接导致选项无法正常渲染：

• axios响应处理逻辑错误：axios 发起请求后返回的响应对象不存在 .json() 方法（该方法是原生fetch API的用法），调用时会直接抛出JS异常阻断流程，axios解析好的响应数据统一存在res.data字段中。
• 返回选项格式不符合组件要求：AsyncSelect 要求loadOptions返回的选项数组，每一项必须包含label（下拉展示的文本）和value（选项唯一标识）两个字段，直接返回MongoDB查询的原始数据（比如带_id、username等自定义字段的结构）会被组件判定为无效选项直接过滤。
• onInputChange 逻辑缺失：默认情况下AsyncSelect会在选中选项、下拉失焦时自动清空输入值，你当前的写法没有返回处理后的输入值，会导致输入状态异常、搜索请求触发逻辑混乱。

修正后可运行代码 #

import { useState } from 'react';
import AsyncSelect from 'react-select/async';
import axios from 'axios';

export default function UserSelect() {
  const [selectedValue, setSelectedValue] = useState(null);
  const [inputValue, setInputValue] = useState('');

  const handleUserChange = (value) => {
    setSelectedValue(value);
  };

  const handleInputChange = (value, { action }) => {
    // 仅在用户手动输入时更新输入值，避免选中/失焦时清空输入打断搜索
    if (action === 'input-change') {
      setInputValue(value);
      return value;
    }
    return inputValue;
  };

  const loadOptions = async (inputVal) => {
    try {
      const res = await axios.get(`/user/${inputVal}`);
      // 把后端返回的MongoDB用户数据映射为组件要求的{label, value}格式
      // 可根据实际用户表字段调整，比如用username做展示文本，_id做选项值
      return res.data.map(user => ({
        value: user._id,
        label: user.username
      }));
    } catch (err) {
      console.error('加载用户选项失败:', err);
      return [];
    }
  };

  return (
    <AsyncSelect
      cacheOptions
      defaultOptions
      value={selectedValue}
      loadOptions={loadOptions}
      onInputChange={handleInputChange}
      onChange={handleUserChange}
    />
  );
}

额外排查点：如果改完还是不显示，打开浏览器控制台看Network面板，确认/user/:inputValue接口是否正常返回200状态码、返回的是否是数组结构，接口报404/500也会导致没有选项渲染。

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