React使用map方法渲染接口返回的嵌套sub_module数组数据问题

嵌套数组渲染解决方案 #

你二次遍历map报错大概率是两个核心原因：

• 没有提前判断sub_module的存在性和数组类型，接口返回字段为空时会抛出类型错误
• 嵌套map渲染的元素没有添加唯一key属性，违反React列表渲染的强制规则

完整可运行JSX示例

// items是存在state里的预定义模块数组
{items.map(personData => (
  // 主数据层必须加唯一key，替换为你接口返回的主数据唯一字段，比如id
  <div key={personData.id} className="module-card">
    {/* 原有可正常渲染的字段 */}
    <h2>{personData.mainModule}</h2>
    <p className="desc">{personData.description}</p>
    {/* 子模块渲染区域 */}
    <div className="sub-module-wrap">
      <h4>关联子模块：</h4>
      {/* 先做边界判断，确保sub_module是数组再执行遍历 */}
      {Array.isArray(personData.sub_module) && personData.sub_module.map(subItem => (
        // 子数据层必须加唯一key，替换为子模块的唯一字段，无唯一id时可临时用subModuleName，不推荐用数组下标
        <span key={subItem.subModuleId} className="sub-module-tag">
          {subItem.subModuleName}
        </span>
      ))}
      {/* 可选：子模块为空时的提示文案 */}
      {(!Array.isArray(personData.sub_module) || personData.sub_module.length === 0) && (
        <span className="empty-tip">无关联子模块</span>
      )}
    </div>
  </div>
))}

核心注意事项

• 所有列表渲染的外层元素必须加唯一key，不要用数组下标当key，尽量用接口返回的唯一id字段，避免列表更新时出现渲染异常
• 嵌套字段遍历前必须做类型判断，避免接口返回null/undefined时调用map方法触发页面崩溃
• 如果子模块需要更复杂的渲染结构，直接修改内层map返回的节点即可

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