如何将数据从api获取到react中的子组合框

import axios from 'axios';

axios.get('API_URL')
  .then(response => {
    const data = response.data;
    // 在这里处理获取到的数据
  })
  .catch(error => {
    console.error('Error fetching data from API:', error);
  });

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('API_URL');
      setData(response.data);
    } catch (error) {
      console.error('Error fetching data from API:', error);
    }
  };

  // 在这里使用data渲染子组合框

  return (
    // JSX代码
  );
};

export default MyComponent;

const MyComponent = () => {
  // ...

  return (
    <select>
      {data.map(item => (
        <option key={item.id} value={item.id}>{item.name}</option>
      ))}
    </select>
  );
};