react-select实现自动补全时GET请求带JSON体返回空数组如何解决

核心问题列表 #

• 请求方法错误：你使用了GET方法发起请求，HTTP协议规范中GET请求不支持携带有效请求体，后端服务会直接忽略GET请求的body参数，这是接口返回空数据的核心原因，Postman测试时你应该使用的是POST方法，代码中需要对应修改为axios.post。
• 请求参数错误：一是你硬编码了搜索值为固定的CAP，没有使用用户输入的value变量；二是参数名可按需调整，你提到接口要求的字段是searcher，如果实际业务里接口需要的是buscador自行替换即可。
• 返回值不符合要求：AsyncSelect的loadOptions属性要求传入的异步函数必须返回格式化后的{value, label}结构数组，你当前的callApi没有返回任何值，也没有调用你提前定义的mapResponseToValuesAndLabels做数据映射。
• 冗余逻辑：每次调用接口都新建axios实例，属于不必要的性能损耗。

修正后的完整代码 #

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

// 可复用的axios实例，不需要每次请求都新建
const apiInstance = axios.create({
  baseURL: 'http://devsite.redetelemedicabr.com.br:3333/medsigtap',
  headers: { 
    'Content-Type': 'application/json',
    'Accept': '*/*'
  }
});

export default function PageComponent() {
  const INITIAL_DATA = {
    value: 0,
    label: 'Selecione o Procedimento',
  };

  const [selectData, setSelectData] = useState(INITIAL_DATA);

  const mapResponseToValuesAndLabels = (data) => ({
    value: data.id,
    label: data.terminologia,
  });

  // 符合loadOptions要求的异步请求函数
  async function callApi(inputValue) {
    try {
      // 改为POST请求，携带动态参数
      const res = await apiInstance.post('/byTerminologia', {
        searcher: inputValue // 如接口实际要求字段为buscador可直接替换
      });
      // 对返回数组做映射后返回给AsyncSelect
      return res.data.map(item => mapResponseToValuesAndLabels(item));
    } catch (err) {
      console.error('请求失败', err);
      // 报错时返回空数组避免组件报错
      return [];
    }
  }

  return (
    <div>
      <p></p>
      <AsyncSelect
        cacheOptions
        loadOptions={callApi}
        onChange={(data) => {
          setSelectData(data);
        }}
        value={selectData}
        defaultOptions
      />
    </div>
  );
}

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