如何在打字稿中对时间轴的元素进行分组

Question

我有一个现有代码，用于构建不同阶段的时间线视图及其给定阶段数组的步骤。每个阶段都包含其名称、步骤和状态。 我需要按阶段名称对这些阶段进行分组，并按阶段名称分组显示其步骤。

import styled from 'styled-components';
import { Timeline } from 'antd';
:

const stageDiv = styled.div`
  font-size: 1rem;
  font-weight: 500;
`;

const stepDiv = styled.div`
  font-size: 1rem;
  font-weight: 300;
`;

:

<Timeline ...>
    {stages.map((stage: any, index: number) => (
        <TimelineItem key={`${stage.StageName}-${index}`}>
            <stageDiv>{stage.StageName}</stageDiv>
            <stepDiv>{stage.step}</stepDiv>
        </TimelineItem>
    ))}
</Timeline>

对于以下输入：

stages = [
    {
        StageName: A,
        Step: <First-Step of A>.
        Status: Done,
    }, 
    {
        StageName: A,
        Step: <Second-Step of A>.
        Status: Pending,
    },
    {
        StageName: A,
        Step: <Third-Step of A>.
        Status: Failed,
    },
    {
        StageName: B,
        Step: <First-Step of B>.
        Status: Done,
    },
    {
        StageName: B,
        Step: <Second-Step of B>.
        Status: Done,
    }
    {
        StageName: C,
        Step: <First-Step of C>.
        Status: Pending,
    }
]

它构建时间轴就像

o   A
|   <First-Step of A>
|
o   A
|   <Second-Step of A>
|
o   A
|   <Third-Step of A>
|
o   B
|   <First-Step of B>
|
o   B
|   <Second-Step of B>
|
o   C
    <First-Step of C>

我需要按名称对这些阶段进行分组并构建时间表，例如

o   A
|   <First-Step of A>
|
|   <Second-Step of A>
|
|   <Third-Step of A>
|
o   B
|   <First-Step of B>
|
|   <Second-Step of B>
|
o   C
    <First-Step of C>

我试过了

function groupBy(objectArray, property) {
  return objectArray.reduce(function (arr, obj) {
    let key = obj[property]
    if (!arr[key]) {
      arr[key] = []
    }
    arr[key].push(obj)
    return arr
  }, [])
}

function ({ stages }: any) {
    let groupedStages = groupBy(stages, 'StageName')
    :
    :

    <Timeline ...>
    {Object.entries(groupedStages).forEach(([stageName, stageSteps]) => (
      <TimelineItem key={stageName}>
        <stageDiv>{stageName}</stageDiv>
        {stageSteps.map((stageStep: any, index: number) => (
            <stepDiv>{stageStep.step}</stepDiv>
        ))}
      </TimelineItem>
    ))}
}

但这不起作用。如何对这些阶段步骤进行分组和显示？

Answer 1

我用在线 javascript 编写了您的代码，它适用于我的情况。你能检查我的代码吗？对你有很大帮助。

const stageArray = stages = [
    {
        "StageName": "A",
        "Step": "<First-Step of A>",
        "Status": "Done",
    }, 
    {
        "StageName": "A",
        "Step": "<Second-Step of A>",
        "Status": "Pending",
    },
    {
        "StageName": "A",
        "Step": "<Third-Step of A>",
        "Status": "Failed",
    },
    {
        "StageName": "B",
        "Step": "<First-Step of B>",
        "Status": "Done",
    },
    {
        "StageName": "B",
        "Step": "<Second-Step of B>",
        "Status": "Done",
    },
    {
        "StageName": "C",
        "Step": "<First-Step of C>",
        "Status": "Pending",
    }
];


function groupBy(objectArray, property) {
  return objectArray.reduce(function (arr, obj) {
    let key = obj[property]
    if (!arr[key]) {
      arr[key] = []
    }
    arr[key].push(obj)
    return arr
  }, [])
}

let groupedStages = groupBy(stages, 'StageName');


Object.entries(groupedStages).forEach(([stageName, stageSteps]) => {
    console.log(stageName);
     stageSteps.map((stageStep, index) => {
        console.log(stageStep.Step);
    });
});