我需要 React 中多列的 RowSpan？

Question

我有一个数组（数据来自 api）：

导出常量数据T = [ { styleId: "e251f03a-b947-4f2d-b054-5a405fd94c24", styleNumber: "10012023", 买家姓名：“H&M”， 订单号：“PO0110012023”， orderUom: "PCS", 发货日期：“2023-01-31T00:00:00”， 颜色：“001 黑色”， 季节：“ALL-22”， 目的地：“英国”， 总数量：3000， 尺码：[ { sizeId：“ee035642-eedd-41ff-83ba-2fc8ceb2548e”， 尺寸：“SIZE-S”， 数量：800 }, { sizeId: "fc66eb9b-11cd-4aa6-8718-c7731ebd0cbb", 尺寸：“SIZE-XS”， 数量：400 }, { sizeId: "e5d69404-079f-419e-8d44-2c93fecc3b7e", 尺寸：“SIZE-M”， 数量：600 }, { sizeId: "026cca07-2afb-407e-85f6-8a615e5d6b37", 尺寸：“SIZE-L”， 数量：600 }, { sizeId: "6e8731a6-4c98-49ac-a9db-93155a306000", 尺寸：“SIZE-XL”， 数量：600 }, { sizeId: "58a8e62c-b385-48d1-8173-1b9d15439ca8", 尺寸：“SIZE-XXL”， 数量：0 }, { sizeId：“aa340e24-eebb-4000-91bd-a534de986d53”， 尺寸：“SIZE-XXXL”， 数量：0 } ] }, { styleId: "e251f03a-b947-4f2d-b054-5a405fd94c24", styleNumber: "10012023", 买家姓名：“H&M”， 订单号：“PO0210012023”， orderUom: "PCS", 发货日期：“2023-01-31T00:00:00”， 颜色：“007 黄色”， 季节：“ALL-22”， 目的地：“英国”， 总数量：3000， 尺码：[ { sizeId：“ee035642-eedd-41ff-83ba-2fc8ceb2548e”， 尺寸：“SIZE-S”， 数量：800 }, { sizeId: "fc66eb9b-11cd-4aa6-8718-c7731ebd0cbb", 尺寸：“SIZE-XS”， 数量：400 }, { sizeId: "e5d69404-079f-419e-8d44-2c93fecc3b7e", 尺寸：“SIZE-M”， 数量：600 }, { sizeId: "026cca07-2afb-407e-85f6-8a615e5d6b37", 尺寸：“SIZE-L”， 数量：600 }, { sizeId: "6e8731a6-4c98-49ac-a9db-93155a306000", 尺寸：“SIZE-XL”， 数量：600 }, { sizeId: "58a8e62c-b385-48d1-8173-1b9d15439ca8", 尺寸：“SIZE-XXL”， 数量：0 }, { sizeId：“aa340e24-eebb-4000-91bd-a534de986d53”， 尺寸：“SIZE-XXXL”， 数量：0 } ] }, { styleId: "e251f03a-b947-4f2d-b054-5a405fd94c24", styleNumber: "10012023", 买家姓名：“H&M”， 订单号：“PO0210012023”， orderUom: "PCS", 发货日期：“2023-01-31T00:00:00”， 颜色：“007 黄色”， 季节：“春天”， 目的地：“英国”， 总数量：3000， 尺码：[ { sizeId：“ee035642-eedd-41ff-83ba-2fc8ceb2548e”， 尺寸：“SIZE-S”， 数量：800 }, { sizeId: "fc66eb9b-11cd-4aa6-8718-c7731ebd0cbb", 尺寸：“SIZE-XS”， 数量：400 }, { sizeId: "e5d69404-079f-419e-8d44-2c93fecc3b7e", 尺寸：“SIZE-M”， 数量：600 }, { sizeId: "026cca07-2afb-407e-85f6-8a615e5d6b37", 尺寸：“SIZE-L”， 数量：600 }, { sizeId: "6e8731a6-4c98-49ac-a9db-93155a306000", 尺寸：“SIZE-XL”， 数量：600 }, { sizeId: "58a8e62c-b385-48d1-8173-1b9d15439ca8", 尺寸：“SIZE-XXL”， 数量：0 }, { sizeId：“aa340e24-eebb-4000-91bd-a534de986d53”， 尺寸：“SIZE-XXXL”， 数量：0 } ] }, { styleId: "e251f03a-b947-4f2d-b054-5a405fd94c24", styleNumber: "10012023", 买家姓名：“H&M”， 订单号：“PO0210012023”， orderUom: "PCS", 发货日期：“2023-01-31T00:00:00”， 颜色：“007 黄色”， 季节：“春天”， 目的地：“英国”， 总数量：3000， 尺码：[ { sizeId：“ee035642-eedd-41ff-83ba-2fc8ceb2548e”， 尺寸：“SIZE-S”， 数量：800 }, { sizeId: "fc66eb9b-11cd-4aa6-8718-c7731ebd0cbb", 尺寸：“SIZE-XS”， 数量：400 }, { sizeId: "e5d69404-079f-419e-8d44-2c93fecc3b7e", 尺寸：“SIZE-M”， 数量：600 }, { sizeId: "026cca07-2afb-407e-85f6-8a615e5d6b37", 尺寸：“SIZE-L”， 数量：600 }, { sizeId: "6e8731a6-4c98-49ac-a9db-93155a306000", 尺寸：“SIZE-XL”， 数量：600 }, { sizeId: "58a8e62c-b385-48d1-8173-1b9d15439ca8", 尺寸：“SIZE-XXL”， 数量：0 }, { sizeId：“aa340e24-eebb-4000-91bd-a534de986d53”， 尺寸：“SIZE-XXXL”， 数量：0 } ] }

];

然后我尝试这样显示它：

import _ from 'lodash';
import moment from 'moment';
import React, { Fragment } from "react";
function DynamicTable(  ) {
    const getRowSpan = ( gender ) => {
        let count = 0;
        data.forEach( ( row ) => {
            if ( row.gender === gender ) {
                count++;
            }
        } );
        return count;
    };
    const getRowSpanT = ( orderNumber, array ) => {
        let count = 0;
        array.forEach( ( row ) => {
            if ( row.orderNumber === orderNumber ) {
                count++;
            }
        } );
        return count;
    };


    return (
        <>

        

            
            <div className='mt-5'>
                <table border="1">
                    <thead>
                        <tr>
                            <th>
                                SL
                            </th>
                            <th>
                                Order
                            </th>
                            <th>
                                Season
                            </th>
                            <th>
                                Shipment Date
                            </th>
                            <th>
                                Destination
                            </th>
                            <th>
                                Color/Size
                            </th>
                            {
                                dataT[0].sizes.map( ( s, indx ) => {
                                    return (
                                        <th key={indx}>
                                            {s.size}
                                        </th>
                                    );
                                } )
                            }

                            <th>
                                Size-Total
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {_.uniq( dataT.map( dd => dd.orderNumber ) ).map( ( o ) => {
                            const rows = dataT.filter( ( row ) => row.orderNumber === o );
                            const rowSpan = getRowSpanT( o, dataT );

                            return rows.map( ( row, index ) => {
                                const sf = rows.filter( ( r ) => r.orderNumber === row.orderNumber );
                                const season = _.uniq( sf.map( s => s.season ) );
                                console.log( season );
                                return (
                                    <tr key={index}>
                                        <td>{index + 1}</td>

                                        {index === 0 && (
                                            <td rowSpan={rowSpan} style={{ verticalAlign: "middle", color: "red" }}>
                                                {o}
                                            </td>
                                        )}

                                        <td> {row.season}({index}) </td>


                                        <td>{moment( row.shipmentDate ).format( "DD/MM/YYYY" )}</td>
                                        <td>{row.destination}</td>
                                        <td>{row.color}</td>
                                        {
                                            row.sizes.map( ( s, sIndex ) => {
                                                return (
                                                    <td key={sIndex}>
                                                        {s.quantity}
                                                    </td>
                                                );
                                            } )
                                        }
                                        <th className='text-right'>
                                            {_.sum( row.sizes.map( s => s.quantity ) )}
                                        </th>
                                    </tr>
                                );
                            } );
                        } )}
                    </tbody>
                </table>
            </div>
        </>
    );
}

export default DynamicTable;

我的输出（见图）：

但我需要那样（见图片）：

记住数据动态变化!!