React中选择手动配置下拉选项时调用GET API的实现问题

问题根源 #

• 组件选型错误：你使用了AsyncSelect异步选择组件，该组件的loadOptions属性设计用途就是动态拉取下拉选项，所以会覆盖你手动预设的category选项列表，不符合固定选项的需求。
• 接口调用时机错误：你将接口请求逻辑写在loadOptions中，会在用户输入搜索内容时触发，而需求是选中下拉项后才触发请求，应该将请求逻辑移到选中事件handleChange中。
• 请求参数错误：之前接口拼接的是用户输入的搜索值inputValue，实际应该传递选中项的value属性作为id参数。
• 无返回数据接收逻辑：之前的fetch请求没有处理返回结果，也没有将数据存入状态中，所以无法拿到接口返回的多条记录。

修复后的完整代码 #

import React, { useState } from 'react';
// 导入普通Select组件，不再用AsyncSelect
import Select from 'react-select';

function App() {
  const [selectedValue, setSelectedValue] = useState(null);
  // 新增状态存储接口返回的业务数据
  const [postData, setPostData] = useState([]);

  // 手动预设的下拉选项
  const category = [
    { value: 1, label: "2017" },
    { value: 2, label: "2018" },
    { value: 3, label: "2019" },
    { value: 4, label: "2020" },
    { value: 5, label: "2021" },
    { value: 6, label: "2022" }
  ];

  // 下拉选中事件
  const handleChange = async (option) => {
    setSelectedValue(option);
    // 选中后调用接口
    try {
      const user = JSON.parse(localStorage.getItem('user'));
      const accessToken = user;
      const res = await fetch(`http://localhost:12345/api/GetProfile/Get_MyPostDetails?id=${option.value}`, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          Authorization: "Bearer " + accessToken
        }
      });
      const data = await res.json();
      // 将接口返回的多条数据存入状态
      setPostData(data);
      // 这里可以根据需求做后续的业务逻辑处理
    } catch (err) {
      console.error('接口请求失败:', err);
    }
  };

  return (
    <div className="App">
      <h3>年份选择查询</h3>
      <Select
        value={selectedValue}
        // 直接用手动预设的选项
        options={category}
        onChange={handleChange}
        placeholder="请选择年份"
      />
      <pre>选中的选项: {JSON.stringify(selectedValue || {}, null, 2)}</pre>
      <pre>接口返回的业务数据: {JSON.stringify(postData || [], null, 2)}</pre>
    </div>
  );
}

export default App;

核心修改说明 #

1. 替换AsyncSelect为普通Select组件，删除loadOptions、onInputChange等异步加载相关的属性，直接绑定手动预设的category作为下拉选项。
2. 将接口请求逻辑移到选中事件handleChange中，选中选项后才发起请求，使用选中项的value作为接口id参数。
3. 新增postData状态存储接口返回的多条数组数据，可直接用于后续业务渲染。

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