and design pro Select 分组双重嵌套遍历实现

import React, {
    
     useState, useEffect } from 'react';
import {
    
     Select } from 'antd';
import {
    
     getList } from '@/services/common';

const Component = ({
     
      value, ...restProps }) => {
    
    
  const [loading, setLoading] = useState(true);
  const [options, setOptions] = useState([]);

  const getListFromServer = async () => {
    
    
    setLoading(true);
    const response = await getList('areaTypes', {
    
     show_area: true });
    setLoading(false);
    if (response.code === 'SUCCESS') {
    
    
      setOptions(response.data);
    }
  };

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

  return (
    <Select
      loading={
    
    loading}
      value={
    
    value ? value + '' : undefined}
      placeholder="请选择"
      {
    
    ...restProps}
    >
      {
    
    options.map(function(areaType, index) {
    
    
        return (
          <Select.OptGroup label={
    
    areaType.display_name}>
            {
    
    areaType.saleAreas.map(function(area, number) {
    
    
              return (
                <Select.Option key={
    
    area.id}>{
    
    area.display_name}</Select.Option>
              );
            })}
          </Select.OptGroup>
        );
      })}
    </Select>
  );
};

export default Component;

前端新手入门学习分享~