Select 选择器使用接口数据

要使用接口数据来填充 Select 选择器，需要先从接口中获取数据，然后将数据转换为适当的格式，以便可以在 Select 组件中使用它们。

以下是一个示例代码，假设接口返回的数据格式为 JSON：

import { useState, useEffect } from 'react';
import { Select } from 'antd';
import axios from 'axios';

const { Option } = Select;

function MySelect() {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    axios.get('/api/options').then(res => {
      const data = res.data;
      // 将接口返回的数据转换为 Select 组件需要的格式
      const formattedOptions = data.map(item => (
        <Option key={item.value} value={item.value}>{item.label}</Option>
      ));
      setOptions(formattedOptions);
    });
  }, []);

  return (
    <Select defaultValue="default" style={{ width: 120 }}>
      {options}
    </Select>
  );
}

在这个示例代码中，我们使用了 `useState` 和 `useEffect` hooks 来管理组件的状态。`useState` 用于存储选项数据，而 `useEffect` 用于在组件挂载时从接口获取数据。在 `useEffect` 中，我们使用了 `axios` 库来发送 GET 请求，并将响应数据转换为 Select 组件需要的格式。最后，我们将格式化后的选项数据设置为组件状态，并在组件中渲染 Select 组件。