当前位置：首页 > React

react map里如何套map

2026-01-25 14:57:21React

在React中使用嵌套`map`方法

嵌套map方法通常用于渲染多层嵌套的数据结构，例如数组中的数组。以下是实现方式和注意事项：

数据结构示例

const nestedData = [
  {
    category: "Fruits",
    items: ["Apple", "Banana", "Orange"]
  },
  {
    category: "Vegetables",
    items: ["Carrot", "Broccoli", "Spinach"]
  }
];

基本嵌套map实现

function NestedList() {
  return (
    <div>
      {nestedData.map((group, groupIndex) => (
        <div key={groupIndex}>
          <h3>{group.category}</h3>
          <ul>
            {group.items.map((item, itemIndex) => (
              <li key={`${groupIndex}-${itemIndex}`}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

关键注意事项

key属性必须唯一且稳定，推荐使用组合键（如${外层索引}-${内层索引}）而非简单索引

react map里如何套map

对于深层嵌套，可考虑将内层map提取为独立组件以提高可读性

function ItemList({ items, groupIndex }) {
  return (
    <ul>
      {items.map((item, itemIndex) => (
        <li key={`${groupIndex}-${itemIndex}`}>{item}</li>
      ))}
    </ul>
  );
}

性能优化建议

当嵌套层级超过3层时，建议重构数据结构或使用扁平化处理

react map里如何套map

对于大型数据集，考虑使用虚拟滚动技术（如react-window）避免性能问题

错误处理

始终检查嵌套数据是否存在再执行map操作

{group.items && group.items.map(...)}

TypeScript版本示例

interface DataGroup {
  category: string;
  items?: string[]; // 可选属性
}

function NestedList({ data }: { data: DataGroup[] }) {
  return (
    <>
      {data.map((group, gi) => (
        <div key={gi}>
          <h3>{group.category}</h3>
          {group.items?.map((item, ii) => (
            <div key={`${gi}-${ii}`}>{item}</div>
          ))}
        </div>
      ))}
    </>
  );
}