如何使用TypeScript合并多数组为单数组并在折叠面板中展示

需求 #

将包含多组数组的对象转换为指定结构的单个数组，最终在折叠面板中按分类展示数据。

原数据结构 #

const rawData = {
  Fruits: [
    { label: 'Apple', text: 'Red Color' },
    { label: 'Mango', text: 'Yellow Color' },
    { label: 'Orange', text: 'Orange Color' },
    { label: 'Grap', text: 'Black Color' }
  ],
  Trees: [
    { label: 'Maple Tree', text: 'Orange Leafs' },
    { label: 'Redbud Tree', text: 'Pink Leafs' },
    { label: 'Pine', text: 'Green Leafs' }
  ],
  Vegetables: [
    { label: 'Tomato', text: 'Red Color' },
    { label: 'PumpKin', text: 'Yellow Color' },
    { label: 'Carrot', text: 'Orange Color' },
    { label: 'Onion', text: 'Red Color' }
  ]
};

目标数据结构 #

type CategoryItem = { label: string; text: string };
type Category = { label: string; values: CategoryItem[] };

// 转换后得到的数组类型为 Category[]
[
  {
    label: 'Fruits',
    values: [
      { label: 'Apple', text: 'Red Color' },
      { label: 'Mango', text: 'Yellow Color' },
      { label: 'Orange', text: 'Orange Color' },
      { label: 'Grap', text: 'Black Color' }
    ]
  },
  {
    label: 'Trees',
    values: [
      { label: 'Maple Tree', text: 'Orange Leafs' },
      { label: 'Redbud Tree', text: 'Pink Leafs' },
      { label: 'Pine', text: 'Green Leafs' }
    ]
  },
  {
    label: 'Vegetables',
    values: [
      { label: 'Tomato', text: 'Red Color' },
      { label: 'PumpKin', text: 'Yellow Color' },
      { label: 'Carrot', text: 'Orange Color' },
      { label: 'Onion', text: 'Red Color' }
    ]
  }
]

TypeScript转换实现 #

利用Object.entries遍历原对象的键值对，将每个键作为分类标签，对应数组作为values值：

// 定义类型
type CategoryItem = { label: string; text: string };
type Category = { label: string; values: CategoryItem[] };
type RawData = Record<string, CategoryItem[]>;

const rawData: RawData = {
  Fruits: [
    { label: 'Apple', text: 'Red Color' },
    { label: 'Mango', text: 'Yellow Color' },
    { label: 'Orange', text: 'Orange Color' },
    { label: 'Grap', text: 'Black Color' }
  ],
  Trees: [
    { label: 'Maple Tree', text: 'Orange Leafs' },
    { label: 'Redbud Tree', text: 'Pink Leafs' },
    { label: 'Pine', text: 'Green Leafs' }
  ],
  Vegetables: [
    { label: 'Tomato', text: 'Red Color' },
    { label: 'PumpKin', text: 'Yellow Color' },
    { label: 'Carrot', text: 'Orange Color' },
    { label: 'Onion', text: 'Red Color' }
  ]
};

// 转换函数
const transformData = (data: RawData): Category[] => {
  return Object.entries(data).map(([label, values]) => ({
    label,
    values
  }));
};

// 得到转换后的数组
const mergedData = transformData(rawData);

折叠面板展示示例（React为例） #

以React组件实现基础折叠面板逻辑，展示转换后的数据：

import { useState } from 'react';

type CategoryItem = { label: string; text: string };
type Category = { label: string; values: CategoryItem[] };

const AccordionDemo = ({ data }: { data: Category[] }) => {
  const [expanded, setExpanded] = useState<string | null>(null);

  const handleChange = (panel: string) => () => {
    setExpanded(expanded === panel ? null : panel);
  };

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto' }}>
      {data.map((category) => (
        <div key={category.label} style={{ border: '1px solid #e0e0e0', borderRadius: '4px', marginBottom: '8px' }}>
          <button
            onClick={handleChange(category.label)}
            style={{
              width: '100%',
              padding: '12px 16px',
              textAlign: 'left',
              border: 'none',
              background: '#f5f5f5',
              cursor: 'pointer',
              fontSize: '16px',
              fontWeight: 500,
              borderRadius: '4px'
            }}
          >
            {category.label}
          </button>
          {expanded === category.label && (
            <div style={{ padding: '16px', background: '#fff' }}>
              {category.values.map((item) => (
                <div key={item.label} style={{ marginBottom: '8px', padding: '8px', borderLeft: '3px solid #2196f3' }}>
                  <strong>{item.label}</strong>: {item.text}
                </div>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

// 组件使用示例
const App = () => {
  const mergedData = transformData(rawData);
  return <AccordionDemo data={mergedData} />;
};

export default App;

内容的提问来源于stack exchange，提问作者davidArchA