如何在reactjs中为依赖下拉列表从数据库中获取数据

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

const Dropdown = () => {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    // 发起网络请求获取数据库数据
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => {
        // 解析响应数据并存储到状态
        setOptions(data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  const handleChange = (event) => {
    // 处理下拉列表值的变化
    const selectedValue = event.target.value;
    console.log('Selected value:', selectedValue);
  };

  return (
    <select onChange={handleChange}>
      <option value="">请选择</option>
      {options.map(option => (
        <option key={option.id} value={option.value}>{option.label}</option>
      ))}
    </select>
  );
};

export default Dropdown;