antd table 嵌套子表格动态获取子表格数据

记录：点击父表格，使用axios动态获取子表格数据并渲染

import React, {useState, useEffect} from 'react';
import {Table} from 'antd';
import request from '@/request/api';
import styles from './index.module.less';

export default function OperateManageCorpus() {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [subTabData, setSubTabData] = useState({});

    async function getDataList() {
        setLoading(true);
        try {
            // const newdata = await request.getDataList(param);
            // if (!newdata) {
            //     return;
            // }
            const newdata = [];
            for (let i = 0; i < 3; ++i) {
                newdata.push({
                    id: i,
                    name: i.toString(),
                    num: 500,
                    date: '2024-06-14 17:43:00',
                });
            }
            setData(newdata);
            setLoading(false);
        }
        catch (error) {
            console.log(error);
        }
    }

    async function onExpand(expanded, record) {
        if (expanded === false) {
            // 因为如果不断的添加键值对，会造成数据过于庞大，浪费资源，
            // 因此在每次合并的时候讲相应键值下的数据清空
            setSubTabData({...subTabData, [record.id]: []});
        } else {
            const data = [{
                id: Math.random(),
                name: record.name,
                num: Math.random(),
                date: '2064-06-14 17:43:00',
            }];
            setSubTabData({...subTabData, [record.id]: data});
        }
    }
    const expandedRowRender = (record, index, indent, expanded) => {
        const columns = [
            {
                title: '数据名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '数据数量',
                dataIndex: 'num',
                key: 'num',
            },
            {
                title: '过期时间',
                dataIndex: 'date',
                key: 'date',
            },
        ];
        return (
            <Table
                bordered
                rowKey={record => record.id}
                style={{margin: '20px 0'}}
                columns={columns}
                dataSource={subTabData[record.id]}
                pagination={false}
            />
        );
    };

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
    ];

    useEffect(() => {
        getDataList();
    }, []);
    return (
        <div className={styles.wrap}>
            <Table
                loading={loading}
                rowKey={record => record.id}
                columns={columns}
                expandable={{
                    expandedRowRender,
                    // expandRowByClick: true,
                    onExpand,
                    rowExpandable: record => record.id !== 0,
                }}
                dataSource={data}
                style={{marginTop: '16px'}}
            />
        </div>
    );
};