React -使用API中的数据填充select下拉列表

import React, { Component } from 'react';

class SelectComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [], // 用于存储API数据
      selectedOption: '' // 用于存储选中的值
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data') // 替换为实际的API地址
      .then(response => response.json())
      .then(data => {
        this.setState({ options: data });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

  handleSelectChange = (event) => {
    this.setState({ selectedOption: event.target.value });
  }

  render() {
    const { options, selectedOption } = this.state;

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

export default SelectComponent;