import React, { useState, useEffect } from 'react';
import Select from 'react-select';

const DynamicSelect = () => {
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        
        // 转换API数据为React Select需要的格式
        const formattedOptions = data.map(item => ({
          value: item.id,  // 通常使用唯一标识符作为value
          label: item.name // 显示给用户的文本
        }));
        
        setOptions(formattedOptions);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <Select
      options={options}
      isLoading={isLoading}
      placeholder="Select an option..."
    />
  );
};

export default DynamicSelect;

const [error, setError] = useState(null);

// 在fetchData函数中添加错误处理
try {
  // ...API调用代码
} catch (err) {
  setError(err.message);
  setOptions([]); // 清空选项或设置默认选项
}

const loadOptions = async (inputValue) => {
  const response = await fetch(`https://api.example.com/search?q=${inputValue}`);
  const data = await response.json();
  return data.map(item => ({
    value: item.id,
    label: item.name
  }));
};

return (
  <AsyncSelect
    loadOptions={loadOptions}
    defaultOptions // 可选：初始加载一些默认选项
  />
);

// 自定义转换函数
const transformData = (apiData) => {
  return apiData.map(item => ({
    value: item.userId || item.id,
    label: `${item.firstName} ${item.lastName}`,
    customData: item // 保留原始数据供后续使用
  }));
};

useEffect(() => {
  let isMounted = true;
  
  const fetchData = async () => {
    try {
      const response = await fetch(apiUrl);
      if (isMounted) {
        setOptions(transformData(await response.json()));
      }
    } catch (error) {
      if (isMounted) setError(error.message);
    }
  };
  
  fetchData();
  
  return () => {
    isMounted = false;
  };
}, [apiUrl]);

import { useState, useEffect } from 'react';
import Select from 'react-select';
import { useDebounce } from 'use-debounce';

const LargeDataSelect = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedInput] = useDebounce(inputValue, 500);
  const [options, setOptions] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/items?search=${debouncedInput}`);
      const data = await response.json();
      setOptions(data.map(item => ({ value: item.id, label: item.name })));
    };
    
    fetchData();
  }, [debouncedInput]);

  return (
    <Select
      options={options}
      onInputChange={setInputValue}
      isSearchable
    />
  );
};

const CustomOption = ({ data, innerRef, innerProps }) => (
  <div ref={innerRef} {...innerProps} className="custom-option">
    <img src={data.avatar} alt={data.label} width="20" />
    <span>{data.label}</span>
    <span className="secondary-text">{data.email}</span>
  </div>
);

return (
  <Select
    options={options}
    components={{ Option: CustomOption }}
  />
);

const groupOptions = [
  {
    label: 'Group 1',
    options: options.filter(opt => opt.category === 'group1')
  },
  {
    label: 'Group 2',
    options: options.filter(opt => opt.category === 'group2')
  }
];

return <Select options={groupOptions} />;