在map函数中根据数据类型渲染指定组件无显示问题排查

你的代码存在两个核心问题，导致组件无法渲染：

• 内层map的回调函数用大括号{}包裹逻辑，但未显式返回组件
• switch分支里仅写出组件表达式，没有将组件作为返回值抛出

修复后的代码 #

{programs.map(p => (
  p.targets.map(t => {
    console.log(t.targetName)
    // 生成唯一key，避免React列表渲染警告
    const uniqueKey = `${p.id}-${t.targetName}`
    switch(t.targetName){
      case 'abc':
        return <ProgramCard key={uniqueKey} name={p.programName} id={p.id} tname={t.targetName} phase={t.targetPhase} />
      default:
        return <ProgramCard1 key={uniqueKey} name={p.programName} id={p.id} tname={t.targetName} phase={t.targetPhase} />
    }
  })
))}

关键说明 #

1. 返回组件：map函数必须返回React元素才能被渲染，因此switch每个分支都需要用return输出组件实例——原代码中仅用括号包裹组件的写法不会产生有效返回值。
2. 添加key属性：React要求列表渲染的每个元素必须有唯一key，用于识别元素变化，避免性能损耗和控制台警告。

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