React+TypeScript如何将datalist转换为指定格式的对象数组

实现方案 #

你原来的逻辑循环层级写反了，最终输出的数组长度和categoryName的键数量一致，所以需要把遍历categoryName放在外层，再为每个分类去datalist中提取对应数值组成数组即可。

核心转换逻辑

const result = Object.keys(categoryName).map((categoryKey) => ({
  label: categoryName[categoryKey],
  data: datalist.map((item) => item[categoryKey]),
  stack: 1
}))

完整修改后的组件代码

import "./styles.css";
import { useMemo } from "react";

// 定义输出项的类型，保证TS类型安全
interface FormattedDataItem {
  label: string;
  data: number[];
  stack: number;
}

const App = () => {
  const categoryName: { [key: string]: string } = {
    group_a: "groupTypeA",
    group_b: "groupTypeB",
    group_c: "groupTypeC"
  };

  const datalist = [
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    },
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    },
    {
      group_a: 10,
      group_b: 9,
      group_c: 8,
      group_d: 7
    }
  ];

  // 用useMemo缓存计算结果，避免重复渲染时重复计算
  const formattedData: FormattedDataItem[] = useMemo(() => {
    return Object.keys(categoryName).map((categoryKey) => ({
      label: categoryName[categoryKey],
      data: datalist.map((item) => item[categoryKey]),
      stack: 1
    }))
  }, [datalist, categoryName])

  // 打印验证结果
  console.log(formattedData)

  return (
    <div className="App">
    </div>
  );
};

export default App;

输出验证

转换后的formattedData和你要求的目标格式完全一致：

const data = [
  { label: "groupTypeA", data: [10,10,10], stack: 1 },
  { label: "groupTypeB", data: [9,9,9], stack: 1 },
  { label: "groupTypeC", data: [8,8,8], stack: 1 },
]

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