如何通过嵌套Map正确生成datalist的Option元素？

问题背景 #

现有职业数据结构如下：

[
  {
    "name": "Barbarian",
    "multi_classing": {
      "prerequisites": [
        {
          "ability_score": {
            "index": "str",
            "name": "STR",
            "url": "/api/ability-scores/str"
          },
          "minimum_score": 13
        }
      ],
      "proficiencies": [
        {
          "index": "shields",
          "name": "Shields",
          "url": "/api/proficiencies/shields"
        }
      ]
    }
  }
]

需要为datalist生成格式为Barbarian- Requires 13 STR的option元素，但以下嵌套Map代码无法正常工作：

multiClassData.map((className, i) => {
    className.multi_classing.prerequisites.map((requirment, j) => {
        return(
            <option
                key={i}
                value={`${className.name}- Requires ${requirment.minimum_score} ${requirment.ability_score.name}`}/>
        )
    })
})

问题分析 #

1. 外层map未返回结果：外层map没有返回内层map生成的元素数组，导致最终无任何输出。
2. key值不唯一：若一个职业有多个前置要求，仅用外层索引i作为key会出现重复，违反React的key唯一性规则。
3. 缺失空值校验：若部分职业没有multi_classing或prerequisites属性，直接访问会抛出运行时错误。

正确实现代码 #

multiClassData.map((classItem, i) => {
  // 空值校验，避免无前置要求的职业触发报错
  if (!classItem.multi_classing?.prerequisites?.length) return null;

  return classItem.multi_classing.prerequisites.map((requirement, j) => (
    <option
      key={`${classItem.name}-${j}`}
      value={`${classItem.name}- Requires ${requirement.minimum_score} ${requirement.ability_score.name}`}
    />
  ));
})

关键优化点 #

• 返回内层map结果：外层map明确返回内层map生成的option数组，确保元素被正常渲染。
• 生成唯一key值：用职业名称+内层索引j组合成key，保证每个option的key唯一。
• 增加空值校验：使用?.可选链操作符检查multi_classing和prerequisites是否存在，避免报错。

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