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;
前端新手入门学习分享~