React+TypeScript场景下，如何将类数组对象转为数组？

针对你遇到的类数组对象无法使用map等数组方法的问题，有几种简洁高效的转换方式，同时适配TypeScript类型系统：

1. 最直接的方式：Object.values() #

Object.values()会直接提取对象的所有值并返回一个数组，对于键为连续数字的类数组对象，它会按数字键的升序返回值，完全匹配你的需求：

import { useFetchData } from './your-path';

export type Item = {
  id: string;
  label: string;
};

export type dataType = {
  [index: string]: Item;
};

function YourComponent() {
  const data: dataType = useFetchData();
  // 转换为数组，TypeScript会自动推断类型为 Item[]
  const dataArray = Object.values(data);

  // 现在可以正常使用map等数组方法
  dataArray.map(item => {
    console.log(item.id, item.label);
    return <div key={item.id}>{item.label}</div>;
  });

  return <div>{/* 渲染内容 */}</div>;
}

2. 按需处理键：Object.keys() + map #

如果需要对键做额外处理（比如过滤非数字键），可以先获取所有键再映射为对应的值：

const dataArray = Object.keys(data)
  // 可选：过滤确保键是数字（如果API可能返回非数字键）
  .filter(key => !isNaN(Number(key)))
  .map(key => data[key]);

关于类型报错的说明 #

你之前直接将dataType转为数组类型报错，是因为原数据本质是对象实例，而非数组实例，TypeScript会严格区分这两种类型。必须先通过Object.values()或Object.keys()+map这类操作，将对象转换为真正的数组实例，才能赋值给数组类型的变量。

内容的提问来源于stack exchange，提问作者eamon.develop