如何在TypeScript React中遍历数组生成县与对应mapColor的结构？

首先需要注意，你提供的原始JSON是三个独立对象，需要先包裹成一个数组才能正常处理。以下是具体实现步骤：

1. 定义TypeScript类型（保证类型安全） #

先给数据和最终结果定义接口，避免类型错误：

// 区域数据接口：第一个对象用state，后续用wda，所以都设为可选属性
interface Area {
  state?: string;
  wda?: string;
  counties: string[];
  mapColor: string;
}

// 最终的县区-颜色映射接口
interface CountyColor {
  county: string;
  mapColor: string;
}

2. 编写数据转换函数 #

使用flatMap遍历每个区域，再用map将每个县区与对应颜色配对，最后扁平化数组得到结果：

const transformData = (areas: Area[]): CountyColor[] => {
  return areas.flatMap(area => {
    return area.counties.map(county => ({
      county,
      mapColor: area.mapColor
    }));
  });
};

3. 在React组件中使用 #

将转换逻辑整合到组件里，处理数据并渲染结果：

import React from 'react';

const CountyColorDisplay: React.FC = () => {
  // 修正后的原始数据数组
  const areas: Area[] = [
    {
      "state": "Area1",
      "counties": ["County1", "County2"],
      "mapColor": "Yellow"
    },
    {
      "wda": "Area2",
      "counties": ["County3", "County4"],
      "mapColor": "Green"
    },
    {
      "wda": "Area3",
      "counties": ["County5", "County6"],
      "mapColor": "Brown"
    }
  ];

  // 转换得到县区与颜色的对应列表
  const countyColorList = transformData(areas);

  return (
    <div className="county-color-container">
      <h3>县区地图颜色对应表</h3>
      <div className="list-wrapper">
        {countyColorList.map((item, idx) => (
          <div key={idx} className="color-item">
            <pre>{JSON.stringify(item, null, 2)}</pre>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CountyColorDisplay;

最终转换结果 #

处理后会得到如下结构的数组，每个元素都是县区与对应颜色的配对：

[
  {"county": "County1", "mapColor": "Yellow"},
  {"county": "County2", "mapColor": "Yellow"},
  {"county": "County3", "mapColor": "Green"},
  {"county": "County4", "mapColor": "Green"},
  {"county": "County5", "mapColor": "Brown"},
  {"county": "County6", "mapColor": "Brown"}
]

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