使用下拉列表从react中的JSON映射嵌套数组

import React, { useState } from 'react';

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState('');

  // 假设以下是从JSON数据中解析得到的嵌套数组
  const options = [
    {
      label: '选项1',
      values: ['值1', '值2', '值3']
    },
    {
      label: '选项2',
      values: ['值4', '值5', '值6']
    },
    {
      label: '选项3',
      values: ['值7', '值8', '值9']
    }
  ];

  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleSelectChange}>
        <option value="">请选择</option>
        {options.map((option, index) => (
          <optgroup key={index} label={option.label}>
            {option.values.map((value, index) => (
              <option key={index} value={value}>{value}</option>
            ))}
          </optgroup>
        ))}
      </select>
    </div>
  );
};

export default MyComponent;